Vue.js 목록을 클릭하면 양식이 양식에 첨부됩니다.

Question

개체 배열이 있습니다. 이러한 객체는 vue.js의 목록에로드됩니다. 이 목록 외에도이 개체 중 하나의 데이터를 표시하는 폼이 있습니다. 목록의 요소 중 하나를 클릭하면이 특정 객체를 양식에 바인딩하고 해당 데이터를 표시하려고합니다.

어떻게 Vue.js에서이 작업을 수행 할 수 있습니까?

내 목록 코드는 다음과 같습니다

<div id="app-7"> 

       <ul id="food-list" v-cloak> 
        <food-item v-for="item in foodList" v-bind:food="item" v-bind:key="item.id" inline-template> 
         <li class="food"> 
          <div class="food-header"> 
           <img :src="'img/' + food.slug +'.png'"> 
           <div class="food-title"> 
            <p>{{food.name}} | 
             <b>{{food.slug}}</b> 
            </p> 
            <p>quantity: {{food.quantity}}</p> 
           </div> 
           <div class="food-load"> // load into form upon clicking this 
           </div> 
          </div> 
         </li> 
        </food-item> 
       </ul> 

</div> 

Answer 1

내가 폼의 코드를 가지고 있지 않기 때문에,이 설명이없는 내 추측이다.

클릭하려는 항목에 click 처리기를 추가 할 수 있습니다. 그것은 방법으로 음식 항목의 가치를 전달합니다.

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

해당 메서드가 호출 될 때 클릭 된 항목을 데이터 속성에 할당 할 수 있습니다. 귀하의 양식이 어디에 있는지, 그리고 그것이 다른 구성 요소에 있는지 확실하지 않습니다. 하위 구성 요소에있는 경우 하위 구성 요소로 전달하거나 부모 구성 요소로 전달하는 이벤트를 내 보내야합니다.

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; 
    } 
} 

Answer 2

샘플 코드에서 정보의 상당히 누락, 스크립트는 당신이 달성하고 싶은 무엇을하고 일이 잘못 갈 수있는 위치를 이해하기 위해 참조하는 것이 매우 중요합니다. 루프 내부에 액세스 속성에 노력하고 '항목'로

1. V-에 대한 개별 식품 항목을 참조합니다

   여기에 내가 당신의 코드에서 제공된 문제의 빠른 목록입니다 (또는 속기 : 당신이 구성 요소

2. 'SRC V-바인드'에 값을 바인딩 가져 오는 않는 '음식'
3. 과 같이 구성 요소의 코드를 포장하지 않는다 'SRC') URL 만 전달하면됩니다. 스크립트에서 인라인으로 지정하지 않습니다.
4. 당신은 버튼을 사용하는 것이 더 낫다 'V-에 : 클릭'가 (또는 속기 '@click') 양식으로 선택한 음식 항목을로드 할 수는
5. 당신은 또한 당신의 자바 스크립트
포함해야한다을

에 관계없이, 여기에 내가이 처리 할 방법 (일부 빈칸을 채우는에서 자유를했다) :

<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> 

는 희망이 도움이!