Vuejs two way binding array

Question

I have this data: Sample = [1,2,3]

one input, and and two button

The button are next data and previous

So the idea is to two way bind the input to Sample[var], where var is changeable via the button,

I've been trying to use compute setter or bind the array with changeable var in the data, with no success, what approach should I take?

here's the code:

<ckeditor v-model="thedata"></ckeditor>

data() {
    return {
        Sample: [1,2,3],
        thedata: Sample[var],
        var : 0
    }
}

Nico Sauza · Accepted Answer · 2021-04-21 07:19:33Z

2

Let me try to help you. So, you want the value of thedata is based on Sample and var, right?

You can try this code :

<template>
  <input v-model="thedata" type="text" />
</template>

<script>
export default {
  data() {
    return {
      Sample: [1, 2, 3],
      var: 0,
      thedata: '',
    };
  },
 
  mounted() {
    this.thedata = this.Sample[this.var];
  },
};
</script>

You can useY mounted() and then combine the data.

answered Apr 21, 2021 at 7:19

Nico Sauza

3392 silver badges7 bronze badges

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

Comments

Michal Levý · Accepted Answer · 2021-04-20 12:30:21Z

0

<ckeditor v-model="sample[index]"></ckeditor>

data() {
    return {
        sample: [1,2,3],
        index: 0
    }
}

answered Apr 20, 2021 at 12:30

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

1 Comment

dhee Over a year ago

Can I simplify it by moving the calculation to computed property?

Collectives™ on Stack Overflow

Vuejs two way binding array

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related