Vue v-for 循环绑定属性

Question

我正在尝试弄清楚如何在 vue 中执行此操作，我一直试图在选项中绑定 "selected" 的值。

在下面的简化代码中，我得到了我想要的，但仅限于第一个产品。它与第一个计算属性:

正确绑定

<template>
  <div>
    <div v-for="index in 2" :key="index">
      <select>
        <option :selected="product1 === ''">Empty</option>
        <option
          v-for="(product, index) of products"
          :key="index"
          :selected="product1 === product.name"
        >{{product.name}}</option>
      </select>
    </div>
  </div>
</template>

<script>
  // chosen products come from vuex store
  computed: {
    product1() {
      return store.state.product1;
    },
    product2() {
      return store.state.product2;
    },
  }
</script>

但是我怎样才能在 v-for 循环中将其更改为自动，可能使用索引？

我需要的实际上是一个循环来渲染这个：

<template>
  <div>
    <select>
      <option :selected="product1 === ''">Empty</option>
      <option
        v-for="(product, index) of products"
        :key="index"
        :selected="product1 === product.name"
        >{{product.name}}
      </option>
    </select>
    <select>
      <option :selected="product2 === ''">Empty</option>
      <option
        v-for="(product, index) of products"
        :key="index"
        :selected="product2 === product.name"
        >{{product.name}}
      </option>
    </select>
  </div>
</template>

我试过使用类似的东西：

:selected="`product${index}` === product.name"

但这给出了一个字符串，而不是计算的属性值...

Answer 1

您可以将选中的商品放在一个数组中，然后通过索引访问：

computed: {
  selectedProducts () {
    return [store.state.product1, store.state.product2];
  }
}

然后你可以:selected="selectedProducts[index] === product.name".

Answer 2

您可以将参数传递给您的计算属性:

<template>
  <div>
    <div v-for="index in 2" :key="index">
      <select>
        <option :selected="getProduct(index) === ''">Empty</option>
        <option
          v-for="(product, index) of products"
          :key="index"
          :selected="getProduct(index) === product.name"
        >{{product.name}}</option>

<script>
  // chosen products come from vuex store
  computed: {
    getProduct() {
      return index=>
           store.state['product'+index];
    },
  }
</script>

Vue v-for 循环绑定属性

Vue v-for loop binding attribute

vue.js

v-for