Vue 3 add multiple values to an array

Question

I'm trying to add multiple values the checkedVessels but it doesn't seem to work.

Here's what I tried

Vue template

<tr v-for="vessel in vessels.data" :key="vessel.id">
    <Input type="checkbox" v-model="checkedVessels" :value="vessel.id" />
</tr>

Vue Script

data () {
    return {
        term: '',
        importing: false,
        exporting: false,
        form: this.$inertia.form({
            file: null
        }),
        checkedVessels: []
    }
},

The docs mention what I could do something like this but I'm not sure what I'm doing wrong

https://vuejs.org/guide/essentials/forms.html#checkbox

I know I could implemented it doing something like

<Input type="checkbox" @click="checkedVessels.push(vessel.id)" />

But the docs implementation looks cleaner to me

Edit:

I used input HTML element instead of my custom Input component and it seems to works fine.

Is there anything I can do to update my custom Input component to make it work just like the regular input HTML element?

Input.vue

<template>
<input class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input">
</template>

<script>
export default {
    props: ['modelValue'],

    emits: ['update:modelValue'],

    methods: {
        focus() {
            this.$refs.input.focus()
        }
    }
}
</script>

I tried it out and It works fine, are you sure that vessel.id is passed correctly? — Boussadjra Brahim
– Boussadjra Brahim, Commented Sep 20, 2022 at 13:24
@BoussadjraBrahim yes when I use my custom Input it just adds the latest value as a string. checkedVessels:"8" — Othmane
– Othmane, Commented Sep 20, 2022 at 13:27
sfc.vuejs.org/#eNplUk1vozAQ/SuWFYlEChDtai8oXe0e+wd6KTkYe0jc4g/… — Boussadjra Brahim
– Boussadjra Brahim, Commented Sep 20, 2022 at 13:29
Bl8pmUV0LK+w6WdTLfOoNO4Xatep33MjNGoJkV/CnqQFISLEUibS8YnebLdraH4hIv0xQYl+yIpLmbeg4UznD9plWb19PYF/MFAFQ== — Boussadjra Brahim
– Boussadjra Brahim, Commented Sep 20, 2022 at 13:29

Fernando Flores · Accepted Answer · 2022-09-20 16:27:24Z

0

What about using a computed with getter and setter? This way you can still use v-model:

Input.vue

<template>
  <input v-model="modelComp" ref="input" class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm">
</template>

<script>
export default {
  props: ['modelValue'],
  computed: {
    modelComp: {
      get: function() {
        return this.modelValue;
      },
      set: function(newValue) {
        this.$emit("update:modelValue", newValue);
      }
    }
  },
  methods: {
    focus() {
      this.$refs.input.focus()
    }
  }
}
</script>

I made the complete example in Playground:

Playground example

Please give it a try and let me know if you find this helpful.

edited Sep 20, 2022 at 16:27

answered Sep 20, 2022 at 15:08

Fernando Flores

532 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

Vue 3 add multiple values to an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related