Vue v-for loop binding attribute

Question

I'm trying to figure out how to do this in vue, I'm stuck trying to bind the value of the "selected" in the options.

In the simplified code below, I get exactly what I want, but only for the first product. It binds correctly with the first computed property:

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

But then how can I change this to be automatic in the v-for loop, probably using the index?

What I need is actually a loop that will render this:

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

I've tried using something like:

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

but that gives a string, not the computed property value...

Efrat Levitan · Accepted Answer · 2018-11-29 16:16:24Z

2

you can pass parameter to your computed property:

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

answered Nov 29, 2018 at 16:16

Efrat Levitan

5,6922 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thomas Miller Over a year ago

This was what I needed to get it working. I also realised I had the "index" twice, in nested v-for loops, which was causing a problem as well. Thanks a lot!

Efrat Levitan Over a year ago

glad to be of help.

akuiper · Accepted Answer · 2018-11-29 16:10:52Z

0

You can put the selected products in an array and then access it by index:

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

And then you can do :selected="selectedProducts[index] === product.name".

answered Nov 29, 2018 at 16:10

akuiper

216k33 gold badges362 silver badges379 bronze badges

Collectives™ on Stack Overflow

Vue v-for loop binding attribute

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related