선택, Vue.js

라디오 입력을 사용 나는 소품이 : [ '속성']선택, Vue.js

{ 
    "name": "Color", 
    "variant": [ 
     { 
     "name": "Red" 
     }, 
     { 
     "name": "Green" 
     }, 
     { 
     "name": "Blue" 
     } 
    ] 
    }, 
    { 
    "name": "Size", 
    "variant": [ 
     { 
     "name": "L" 
     }, 
     { 
     "name": "XL" 
     }, 
     { 
     "name": "XXL" 
     } 
    ] 
    }

템플릿 :

<div class="form-group" v-for="(attribute, index) in attributes"> 
    {{attribute.name}} 
     <div v-for="(variant, vindex) in attribute.variant"> 
       <input type="radio" 
        :value="[{name: attribute.name, variant:variant.name}]" 
        :id="'radio' + vindex" 
        :name="'group' + index"> 
        {{variant.name}} 
     </div> 
</div>

결과 : enter image description here

질문 : 배열에서 선택된 라디오 버튼을 반환하려면 어떻게해야합니까? 예 :

[{ 
    "name": "Color", 
    "variant": 
     { 
     "name": "Blue" 
     } 
    }, 
    { 
    "name": "Size", 
    "variant": 
     { 
     "name": "XL" 
     } 
    }]

라디오 버튼은 배열에 확인란을 추가하지 않습니다.

출처

2017-12-22 A.Klapchuk

입니까? – samayo

클릭 핸들러 만 배열에 추가 ** selectVariants : function (vindex) { var input = document.getElementById ('radio'+ vindex); this.attr.push (input.value); } ** –

라디오 값을 데이터에 바인딩하려면 @ 클릭 핸들러가 필요합니다. – samayo

다음과 같이 할 수 있습니다.

새 항목이 추가 될 때마다 기존 항목이 splice 필요합니다.

주 아이템은 현재 아이템을 루핑하여 기존 아이템의 인덱스를 찾아 제거함으로써 새로운 값을 업데이트 할 수 있습니다.

아래의 코드를 확인하십시오. 어디 클릭 핸들러는

var attributes = [{ 
 
    "name": "Color", 
 
    "variant": [ 
 
     { 
 
     "name": "Red" 
 
     }, 
 
     { 
 
     "name": "Green" 
 
     }, 
 
     { 
 
     "name": "Blue" 
 
     } 
 
    ] 
 
    }, 
 
    { 
 
    "name": "Size", 
 
    "variant": [ 
 
     { 
 
     "name": "L" 
 
     }, 
 
     { 
 
     "name": "XL" 
 
     }, 
 
     { 
 
     "name": "XXL" 
 
     } 
 
    ] 
 
}]; 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    message: 'Hello Vue.js!', 
 
    attributes: attributes, 
 
    selectedData:[] 
 
    }, 
 
    methods:{ 
 
    setValue(name, value) { 
 
     //console.log(name,value); 
 
     
 
     var self = this; 
 
     this.selectedData.forEach(function(val, index){ 
 
     
 
     if(val['name'] == name) { 
 
      self.selectedData.splice(index, 1); 
 
      return false; 
 
     } 
 
     }); 
 
     
 
     
 
     this.selectedData.push({ 
 
     "name": name, 
 
     "variant": 
 
      { 
 
      "name": value 
 
      } 
 
     }); 
 
    } 
 
    } 
 
})

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script> console.info = function(){} </script> 
 
<script src="https://vuejs.org/js/vue.js"></script> 
 
<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style>.half{width:50%;float:left;}</style> 
 
</head> 
 
<body> 
 
    <div id="app"> 
 
    <div class="half"> 
 
     
 
     <div class="form-group" v-for="(attribute, index) in attributes"> 
 
    {{attribute.name}} 
 
      <div v-for="(variant, vindex) in attribute.variant"> 
 
       <label> 
 
       <input @click="setValue(attribute.name, variant.name)" type="radio" 
 
        :value="[{name: attribute.name, variant:variant.name}]" 
 
        :id="'radio' + vindex" 
 
        :name="'group' + index"> 
 
        {{variant.name}}</label> 
 
      </div> 
 
      </div>   
 
     </div> 
 
      <div class="half"> 
 
     <pre>{{ selectedData }}</pre></div> 
 
    </div> 
 
    </body> 
 
</html>

출처

2017-12-22 14:30:23

Perfect! 고맙습니다. –

답변

관련 문제