在 v-for 中使用 v-if

Question

我有 2 个包含各种信息的数据集（数据集 A 和数据集 B），我正在使用 v-for 根据数据集 A 的长度动态生成 table 行。

但是，我现在尝试在 v-for 中使用 v-if 来检查数据集 A 中的 id 列是否与数据集 B 中的 id 列匹配。如果匹配，那么我将显示“可用”按钮，否则我将显示不可用按钮。

但是，我知道 v-if 在 v-for 中不起作用。因此，是否有其他方法可以解决这种情况？

这是我的代码示例：

<tr v-for="(dataset, i) in datasetA" :key="i">
     <td v-if="checkIfSame(dataset['id']) == true">
          <button class="btn btn-primary" :id="dataset['id']">
             Available
          </button>
    </td>
   <td v-else>Unavailable</td>
</tr>

在我的 methods: {} 里面：

checkIfSame: function (id) {
    this.datasetB.filter(function (item) {
        return item.id === id;
    });
},

Answer 1

你的代码应该没问题。

在相同节点上使用v-for和v-if是not recommended。例如，如果你有这个，那是不推荐的：

<tr v-for="(dataset, i) in dataSetA" :key="i" v-if="checkIfSame(dataset['id']) == true">
    <td>etc.</td>
</tr>

原因是 v-for 的优先级高于 v-if。在这种情况下，最好使用计算属性到 return 过滤列表。

你的例子是：

<topLevelEl v-for="i in z">
    <childEl v-if="i === 2">
        It's two!
    </childEl>
    <childEl v-else>
        It's not two.
    </childEl>
</topLevelEl>

这里的v-if和v-for不在同一个节点上。 v-if 在 childEl 上，v-for 在 topLevelEl 上。这可以。除了打开 v-for 的节点之外的任何内容都可以。如果嵌套在同一个 HTML 标签中，您仍然可以再次使用它，例如，如果您再次将 topLevelEl 嵌套在其中，您仍然可以在其中自由使用它。

Answer 2

像下面的片段一样尝试：将您的检查功能更改为：

checkIfSame(id) {
  return this.datasetB.find(item => item.id === id) || false 
},

new Vue({
  el: '#demo',
  data() {
    return {
      datasetA: [{id: 1, name: 'aaa'},{id: 2, name: 'bbb'},{id: 3, name: 'ccc'},],
      datasetB: [{id: 2, name: 'bbb'}]
    }
  },
  methods: {
    checkIfSame(id) {
      return this.datasetB.find(item => item.id === id) || false
    },
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <table>
    <tr v-for="(dataset, i) in datasetA" :key="i">
       <td v-if="checkIfSame(dataset.id)">
         <button class="btn btn-primary" :id="dataset.id">
           Available
         </button>
       </td>
       <td v-else>Unavailable</td>
    </tr>
  </table>
</div>

在 v-for 中使用 v-if

using a v-if inside a v-for

javascript

jquery

vue.js

v-for