Question

在 Vue JS 中根据点击事件有条件地渲染组件

2022-06-28

854

javascript vue.js frontend

使用 Vue JS 已经有一段时间了，我目前正在尝试渲染一个数据列表，每个记录都有一个按钮。单击按钮时，我想有条件地渲染一个组件（在本例中）。

有没有 Vue 认可的方法可以做到这一点？我应该操作 DOM 吗？以下方法似乎不起作用。

<template>
    <div v-for="data in list">
      {{ data.bar}}
      <button @click="handleClick">
        <div v-if="dataset.loading === 'true'">
          <loader/>
        </div>
        <div v-else>
      </button>
    </div>
</template>

<script setup>
    import { loader } from './components'

    const list = [{ foo: 'bar'}];
    
    const handleClick = (el) => {
        el.dataset.loading = 'true';
        setTimeout(3, () => el.dataset.loading = 'false');
    };
</script>

Answer 1

观察：

list 数组中没有带有 bar 键的对象。请使用 data.foo 而不是 data.bar 。

建议：

建议尽可能使用 v-for 提供 :key 。
在列表数组的每个对象中添加 loading 属性。这样它在设置值 onClick 时就会动态表现。

现场演示：

new Vue({
  el: '#app',
  data: {
    list: [{ foo: 'bar', loading: false }]
  },
  methods: {
    handleClick(dataIndex) {
      this.list[dataIndex].loading = true;
      setTimeout(() => {
        this.list[dataIndex].loading = false;
      }, 2000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(data, index) in list" :key="index">
      {{ data.bar }}
      <button @click="handleClick(index)">
        <div v-if="data.loading">
          Loading Start
        </div>
        <div v-else> Loading Finish </div>
      </button>
    </div>
</div>

Answer 2

您需要在 list 变量上使用 ref 来使其具有响应性。此外，您正在访问应用程序中不存在的 dataset 变量。

这是一种方法，我刚刚在您的 list 上添加了额外的数据

<script setup>
import {ref} from 'vue'


let list = ref([{ foo: 'bar', loading: 'true'}]);

const handleClick = (data) => {
    setTimeout(() => {
      data.loading = 'false'
    },1000);
};

</script>

<template>

    <div v-for="data in list" >
      {{ data.foo}}
      <button @click="handleClick(data)"> //you can also use a `ref` here.
        <div v-if="data.loading === 'true'">
          Your Loader Component
        </div>
        <div v-else> 
          Something else...
        </div>
      </button>
    </div>
</template>

您还可以使用模板引用