Question

我试图弄清楚如何做到这一点，我一直试图在选项中绑定“ 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

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

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

Answer 2

您可以将选定的产品放入一个数组中，然后按索引对其进行访问：

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

然后您可以执行:selected="selectedProducts[index] === product.name"。

Vue v-for循环绑定属性

2 个答案: