은 v-for 루프에서 입력 (v-model)을 보는 방법입니다.

Question

루프를 통과하는 객체의 배열이 있고 각 객체와 관련된 입력을 보는 wana이지만 문제는 v- 모델 = "무언가":이 무언가가 바뀌어 무엇을 볼지 모릅니다.

<table class="table displaynone" id="table-sauces" > 
    <tr v-for="o in order">       
     <td>@{{o.produit}} @{{o.num}}</td> 
      <td v-for="sauce in les_sauce">     
       <input type="radio" :name="o.produit+o.num" @click="$emit(setsauce(o.is_menu))" :value="sauce.id" v-model="o.sauce"> 
        @{{sauce.name}} 
       <img :src="sauce.link"> 
     </td> 
    </tr> 
</table> 

어떻게 그 값을 볼 수 있습니까?

Answer 1

루프의 레벨이 두 가지이며 루프가 다른 것 (order 및 les_sauce) 인 것 같습니다.

이

당신은 그 배열 항목과 시계의 각각에 대해 별도의 하위 구성 요소를 만들 수 있습니다

그럼에도 불구하고, 여기에 코드 (v-for="sauce in les_sauce")의 내부 루프를 사용하며 변화를 볼 수있는 방법을 보여주는 간단한 예이다 하위 구성 요소 내부의 변경 사항

예를 들어

,이 상위 구성 요소 템플릿의 반복 일부입니다

<td v-for="sauce in les_sauce"> 
    <sauce-view :sauce="sauce" :ord="o"></sauce-view> 
</td> 

자녀의 구성 요소 :

위의 하위 구성 요소 코드에 대한 샘플 코드에 나타낸 바와 같이

Vue.component('sauce-view', { 
    props: ["sauce", "ord"], 
    template: ` 
     <div class="sauce-view"> 
      <input type="radio" :name="ord.produit+ord.num" 
      @click="$emit(setsauce(ord.is_menu))" 
      :value="sauce.id" v-model="ord.sauce"> @{{sauce.name}} 
      <img :src="sauce.link"> 
     </div>`, 
    watch: { 
     sauce: function() { 
      // this will get triggered within sauce-view component, when one of your "sauce" changes 
     }, 
     ord: function() { 
      // this will get triggered within sauce-view component, when one of your "o" changes 
     } 
    } 
}) 

, 여기 당신이 부모로부터 개별 배열 항목을 볼 수 있음 - o 및 sauce

참고 : o 부모 하위 구성 요소에 ord으로 전달됩니다. 다음은 변수가 부모 및 자식 구성 요소에서 동일하지 않아도되는 예를 보여줍니다.

편집 : 위, 나는 깊은 감상에 필요한 deep:true를 설정하지 않은 내 샘플 코드에서 주석 # 4 (깊은 관찰)

후 추가 정보를 제공합니다.

옵션 : 여기

이 API document에서 해당 라인입니다

깊은는 객체 내부에 중첩 된 값의 변화를 감지하기 위해, 당신은 깊이에 전달해야 진정한 옵션 인수에. 귀하의 경우에는

다음과 같이 위의 샘플 코드를 수정할 수 있습니다

watch: { 
    sauce: { 
     handler: function() { 
      // this will get triggered when any of the nested values of "sauce" change 
     }, 
     deep: true // this enables watching the nested values inside this object 
    }, 
    ord: function() { 
     // this will get triggered within sauce-view component, when one of your "o" changes 
    } 
} 

는 희망이 도움이! 나는 복사 whene