Extracting dynamic data from inputs into string

Question

Adding input values into data structure:

<template>
    <input 
        v-for="item in this.inputValues" :key="item.id"
        v-model="item.value"
    />
</template>

<script>
export default {
    data() {
        return {
            inputValues: [
            { id: 1 },
            { id: 2 },
            { id: 3 },
            { id: 4 },
            { id: 5 },
            { id: 6 }],
        }
    },
};
</script>

Would then like a function that essentially does:

    {{ this.inputValues[0].value }}
    {{ this.inputValues[1].value }}
    {{ this.inputValues[2].value }}
    {{ this.inputValues[3].value }}
    {{ this.inputValues[4].value }}
    {{ this.inputValues[5].value }}

My preference would be for this to be outputted into a string, and for the string to only have each value as it is entered and that it be in the correct input order.

I feel like your question is not complete. You are having a problem doing it or you want to get ideas how to do it? — Tsepo Nkalai
– Tsepo Nkalai, Commented Oct 30, 2019 at 13:03
I'm not sure which lifecycle hook is best to use to do it. I have tried looping through inputValues in computed, getting the value param, and then adding it to a string which is defined in data, but it creates a string that shows "undefinedundefined..." and adds the values on top which isn't what I'd like. Can't quite figure it out. — wilcode
– wilcode, Commented Oct 30, 2019 at 13:06
don't use this inside the template-section. Just a small hint. Just write v-for="item in inputValues" — Effection
– Effection, Commented Oct 30, 2019 at 13:10
You not storing the values in inoutValues. The v-model="item.value" means you are storing in item.value — Tsepo Nkalai
– Tsepo Nkalai, Commented Oct 30, 2019 at 13:10

Pierre Said · Accepted Answer · 2019-10-30 13:17:00Z

1

You can use a computed to join your values like this:

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
    data: {
          inputValues: [
          { id: 1 },
          { id: 2 },
          { id: 3 },
          { id: 4 },
          { id: 5 },
          { id: 6 }],
    },
    computed: {
        mergedValues() {
          return this.inputValues.map(v => v.value).join('');
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <input 
        v-for="item in inputValues" :key="item.id"
        v-model="item.value"
    />
    {{mergedValues}}
</div>

Or better you could just iterate over the array in your template.

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
    data: {
          inputValues: [
          { id: 1 },
          { id: 2 },
          { id: 3 },
          { id: 4 },
          { id: 5 },
          { id: 6 }],
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <input 
        v-for="item in inputValues" :key="item.id"
        v-model="item.value"
    />
    <p v-for="item in inputValues">
      {{item.value}}
    </p>
</div>

Also you do not need to do this.inputValues in your template you can just do this : inputValues.

answered Oct 30, 2019 at 13:17

Pierre Said

3,8901 gold badge22 silver badges34 bronze badges

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

1 Comment

wilcode Over a year ago

Thank you, this resolved my issue. I think I was also trying to call a function the same name as a data object which didn't help.

Tsepo Nkalai · Accepted Answer · 2019-10-30 13:35:45Z

0

Trying something like this. This code has not been tested, it is just sort of like psuedocode if it does not work

<input v-for="($event, index) in inputValues" :key="item.id" v-on:keyup.enter="save(even, item)" />

And then in the save method you have something like

save(event, item) {
 this.inputValues[index].value = event.value;
}

answered Oct 30, 2019 at 13:35

Tsepo Nkalai

1,51412 silver badges19 bronze badges

Collectives™ on Stack Overflow

Extracting dynamic data from inputs into string

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related