Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

I have a JSON object called valuesRequired which is a listing of all values that I am diffing against for other purposes. What I would like to do is use this already created object to bind to the inputs. I can't seem to find a way to do it.

Here is the code, I've only provided the necessary aspects to show what I desire to do and not all of the other methods etc. The aspect I want to do is specifically v-model="valuesRequired.{{item.name}}" which in the below example would end up being v-model="valuesRequired.foo"

<li v-for="item in listItems" :key="item.description"> <label :for="item.name">{{ item.description }}</label> <input :type="item.type" :name="item.name" v-model="valuesRequired.{{item.name}}" /> </fieldset> <script> export default { data: function () { return { valuesRequired: { foo: "bar" </script>

Currently to work around this I'm dynamically adding properties to this.$data but that then requires me to map them into the valuesRequired object.

Thank you so much for your help!

{{item.name}} doesn't do anything, it's already reading everything in v-model as code so you should be writing v-model='valuesRequired[item.name]' – Andria Jul 5, 2018 at 18:09 @chbchb55 It's hard to know at times where the vuejs magic stops, that worked out perfectly. Mind making it the answer so I can mark it as correct? – gregwhitworth Jul 5, 2018 at 18:14 @Bert LOL, I'm aware that that is JavaScript - what I meant is I wasn't aware of what is/isn't allowed within the vue templates. I already had the vue linter yelling at me with various other things that I had tried, such as the utilization of the handlebar approach to dynamic access to the valuesRequired object. – gregwhitworth Jul 5, 2018 at 20:51

{{item.name}} is used when the default is text

Your issue is that when you do v-model='valuesRequired.{{item.name}}' this is being rendered as v-model='valuesRequired.{{My Name}}' .

Essentially, the text you pass to v-model is evaluated as JavaScript, therefore, you should use bracket notation to access valuesRequired at item.name .

What you want is the following (JSFiddle Link):

Vue.js Script Setup:

new Vue({
  el: "#app",
  data: {
    item: {
      name: 'foo'
    valuesRequired: {
      foo: 'bar',
      baz: 'faz'
Vue.js HTML Template:
<div id="app">
  <input type='text' v-model='valuesRequired[item.name]' />
    {{valuesRequired}}
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.