从 JSON 中选择，在 Vue.js 中使用单选输入答案

【问题标题】：Select from JSON, use radio input in Vue.js从 JSON 中选择，在 Vue.js 中使用单选输入
【发布时间】：2017-12-22 11:46:41
【问题描述】：

我有道具：['attributes']

    {
    "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"
      }
  }]

单选按钮不会作为复选框添加到数组中。

【问题讨论】：

您的点击处理程序在哪里？
点击处理程序仅在数组中添加 ** selectVariants: function(vindex) { var input = document.getElementById('radio' + vindex); this.attr.push(input.value); }**
您需要@click 处理程序将单选值绑定到您的数据
你能帮我吗？一个简单的处理程序：如果 cheked - 在数组中添加，否则在数组中删除。问题是你需要添加和删除一个对象。
您可以自己轻松完成。只需检查 vue 介绍中的点击事件

标签： json vue.js radio-button

【解决方案1】：

你可以这样做。

您每次都需要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>

【讨论】：

完美！谢谢。