[Vuejs]-Vue.js change model attached to a form upon clicking a list

Since I do not have the code for the form, this is my best guess without clarification.

You can add a click handler to the item you want to be clicked. It will pass the value of the food item into the method.

<div class="food-load" @click="setFoodItem(item)">
</div>

And when that method is called, it can assign the clicked item to a data property. I’m not sure where your form is, and if it is in a different component. If it is in a child component, you would have to pass it in as a prop, or emit an event to pass it to a parent component.

data() {
    return {
        //create a reactive field to store the current object for the form.
        foodItemForm: null
    };
},
methods: {
    //method for setting the current item for the form.
    setFoodItem(item) {
        this.foodItemForm = item;
    }
}

Missing quite a bit of info in your sample code, your script is very important to see to make sense of what you would like to accomplish and where things might be going wrong.

Here’s a quick list of the issue I came across with your code:

1. v-for refers to an individual food item as ‘item’, inside the loop you’re trying to access properties as ‘food’
2. You don’t wrap your code in a component unless you’re importing the component
3. When binding a value to ‘v-bind:src’ (or shorthand ‘:src’) only pass the url, you should be specifying this in your script not inline.
4. You’re better off using a button and the ‘v-on:click’ (or shorthand ‘@click’) to load your selected food item into your form
5. You should also include your Javascript

Regardless, here’s how I would handle this (took the liberty in filling in some blanks):

    <template>
        <div id="app">
    <ul id="food-list">
      <!--<food-item v-for="item in foodList" v-bind:food="item" v-bind:key="item.id" inline-template>-->
        <li v-for="item in foodList" class="food">
          <div class="food-header">
            <img :src="item.slug" v-bind:alt="item.slug" width="250px" height="auto">
            <div class="food-title">
              <p>{{item.name}} | <b>{{item.slug}}</b></p>
              <p>quantity: {{item.quantity}}</p>
            </div>
            <button class="food-load" @click="loadFoodItem(item.id)">Load Food Item</button>
          </div>
        </li>
      <!--</food-item>-->
    </ul>

    <form v-if="activeFoodId != null" id="foodItemForm" action="#">
      <h3>Food Form</h3>
      <label for="food-id">Id:</label>
      <input id="food-id" type="number" v-bind:value="foodList[activeFoodId].id"><br/>
      <label for="food-slug">Slug:</label>
      <input id="food-slug" type="text" v-bind:value="foodList[activeFoodId].slug"><br/>
      <label for="food-name">Name:</label>
      <input id="food-name" type="text" v-bind:value="foodList[activeFoodId].name"><br/>
      <label for="food-quantity">Quantity:</label>
      <input id="food-quantity" type="number" v-bind:value="foodList[activeFoodId].quantity">
    </form>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: function () {
    return {
      activeFoodId: null,
      foodList: [
        {
          id: 1,
          slug: 'http://3.bp.blogspot.com/-QiJCtE3yeOA/TWHfElpIbkI/AAAAAAAAADE/Xv6osICLe6E/s320/tomato.jpeg',
          name: 'tomatoes',
          quantity: 4
        }, {
          id: 2,
          slug: 'https://img.purch.com/rc/300x200/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzA2NS8xNDkvb3JpZ2luYWwvYmFuYW5hcy5qcGc=',
          name: 'bananas',
          quantity: 12
        }, {
          id: 3,
          slug: 'https://media.gettyimages.com/photos/red-apples-picture-id186823339?b=1&k=6&m=186823339&s=612x612&w=0&h=HwKqE1MrsWrofYe7FvaevMnSB89FKbMjT-G1E_1HpEw=',
          name: 'apples',
          quantity: 7
        }
      ]
    }
  },
  methods: {
    loadFoodItem: function (foodItemId) {
      console.log(foodItemId)
      this.activeFoodId = foodItemId
    }
  }
}
</script>

<style>
  /# Irrelevant #/
</style>

Hope it helps!