Question

我有道具：['属性']

  protected void BtnGet_Click(object sender, EventArgs e)
    {
        XmlNodeList itemsList = RSSDoc.GetElementsByTagName("item");//get a list of item node
        if (itemsList.Count > 0)
        {
            foreach (XmlNode eachItem in itemsList) //for each item node
            {
                XmlNodeList itemNode = eachItem.ChildNodes;
                foreach (XmlNode itemchild in itemNode)     //Access title node
                {
                    if (itemchild.Name == "title")
                    {
                        lbldesc.Text = (itemchild.ChildNodes[3].InnerText);
                    }
                }
            }

        }
    }

在模板中：

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

结果： enter image description here

问题：如何返回阵列中选定的单选按钮？例如：

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

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

Answer 1

你可以这样做。

每次添加新值时，您需要splice现有项目。

主要部分是搜索项目并删除，您可以通过循环查看当前项目并查找现有项目的索引并将其删除，以便更新新值。

检查以下代码。

＆＃13;

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

＆＃13;

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

＆＃13;

从JSON中选择，在Vue.js中使用无线电输入

1 个答案: