有条件地在 Vue JS 中的单击事件上渲染组件

Question

使用 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>

您还可以使用模板引用