我如何能夠統一，從多組單選按鈕獲取文本？ （vue.js 2）

Question

我VUE成分是這樣的：

<template> 
    <div> 
     <div class="col-md-4"> 
      <ul class="list-unstyled"> 
       <li><strong>England</strong></li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input type="radio" name="england" class="radio"> Chelsea 
         </label> 
        </div> 
       </li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input type="radio" name="england" class="radio"> Mu 
         </label> 
        </div> 
       </li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input type="radio" name="england" class="radio"> Arsenal 
         </label> 
        </div> 
       </li> 
      </ul> 
     </div> 
     <div class="col-md-4"> 
      <ul class="list-unstyled"> 
       <li><strong>Spain</strong></li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input type="radio" name="spain" class="radio"> Madrid 
         </label> 
        </div> 
       </li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input type="radio" name="spain" class="radio"> Barcelona 
         </label> 
        </div> 
       </li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input type="radio" name="spain" class="radio"> Atletico 
         </label> 
        </div> 
       </li> 
      </ul> 
     </div> 
     <div class="col-md-4"> 
      <ul class="list-unstyled"> 
       <li><strong>Italy</strong></li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input type="radio" name="italy" class="radio"> Juve 
         </label> 
        </div> 
       </li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input type="radio" name="italy" class="radio"> Milan 
         </label> 
        </div> 
       </li> 
       <li> 
        <div class="checkbox"> 
         <label> 
          <input type="radio" name="italy" class="radio"> Inter 
         </label> 
        </div> 
       </li> 
      </ul> 
     </div> 
     <span id="result-select">Result</span> 
    </div> 
</template> 

<script> 
    export default { 
     props: ['...'], 
     ... 
    } 
</script> 

我的JavaScript代碼：

$('input[type="radio"]').click(function(){ 
    var $radio = $(this); 
    var name = $(this).prop("name"); 

    // if this was previously checked 
    if ($radio.data('waschecked') == true) 
    { 
     $radio.prop('checked', false); 
     $radio.data('waschecked', false); 
     $('#result-select').text(''); 
    } 
    else{ 
     $radio.data('waschecked', true); 
     $(`input[name=${name}]:not(:checked)`).data('waschecked', false); 
     $('#result-select').text(txt); 
    } 

    let output = []; 
    var txt; 
    $('input[type="radio"]:checked').each(function() { 
      txt = $(this).parent().text(); 
      output.push(txt); 
    }); 
    $('#result-select').text(output.join(' - ')); 
}); 

我仍然使用JavaScript來每個選定單選按鈕組統一。此JavaScript代碼工作正常。但我想用VUE組件來改變它。所以沒有JavaScript代碼。但我仍然困惑

我會解釋圖表第一

我想：

如果我選擇切爾西，皇馬和尤文的結果是這樣的：

切爾西 - 馬德里 - 尤文

如果我選擇切爾西和馬德里的結果是這樣的：

切爾西 - 馬德里

所以，如果我檢查單選按鈕，它顯示的文字。如果我取消單選按鈕，它不顯示文本

我怎樣才能做到這一點在VUE組件？

更新：

單選按鈕可以選中

例如：

如果我選擇切爾西，皇馬和尤文的結果是這樣的：

切爾西 - 馬德里 - 尤文

後來我取消馬德里，結果是這樣的：

切爾西 - 尤文

Answer 1

你需要一個值任何時候，您的VUE模板輸出基於其他值，你應該看看使用computed。在這種情況下，計算的是經過全國數據，並挑選出所選擇的城市名稱，並返回它們作爲一個列表。

computed: { 
    selecteds() { 
     return this.countries 
     .map(c => c.selected) 
     .filter(s => s); 
    } 
    }, 

選中和取消選中功能由v-model on the radio inputs提供。如果綁定到v-model的值與綁定到value的值相匹配，則檢查該按鈕;如果沒有，不是。

我用一個settable computed來處理你點擊一個已經點擊的按鈕的情況。如果它已被選中，則將該值設置爲空以取消選擇它。因爲我在一個組件中，「設置該值爲null」是通過發出父代用來設置值的事件來完成的。

computed: { 
    proxySelected: { 
     get() { 
     return this.data.selected; 
     }, 
     set(newValue) { 
     this.$emit('update', this.data.name, this.data.selected === newValue ? null : newValue); 
     } 
    } 
    } 

function countryData(name, cities) { 
 
    return { 
 
    name, 
 
    cities, 
 
    selected: null 
 
    }; 
 
} 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    countries: [ 
 
     countryData('England', ['Chelsea', 'MU', 'Arsenal']), 
 
     countryData('Spain', ['Madrid', 'Barcelona', 'Atletico']), 
 
     countryData('Italy', ['Juve', 'Milan', 'Inter']) 
 
    ] 
 
    }, 
 
    computed: { 
 
    selecteds() { 
 
     return this.countries 
 
     .map(c => c.selected) 
 
     .filter(s => s); 
 
    } 
 
    }, 
 
    methods: { 
 
    update(countryName, newSelectedValue) { 
 
     this.countries.find(c => c.name === countryName).selected = newSelectedValue; 
 
    } 
 
    }, 
 
    components: { 
 
    country: { 
 
     template: '#country-template', 
 
     props: ['data'], 
 
     data() { 
 
     return { 
 
      checked: [] 
 
     }; 
 
     }, 
 
     computed: { 
 
     proxySelected: { 
 
      get() { 
 
      return this.data.selected; 
 
      }, 
 
      set(newValue) { 
 
      this.$emit('update', this.data.name, this.data.selected === newValue ? null : newValue); 
 
      } 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

.list-unstyled { 
 
    list-style: none; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <country v-for="country in countries" :data="country" @update="update" :key="country.name"></country> 
 
    <div>{{selecteds.join(' - ')}}</div> 
 
</div> 
 

 
<template id="country-template"> 
 
    <div class="col-md-4"> 
 
    <ul class="list-unstyled"> 
 
     <li><strong>{{data.name}}</strong></li> 
 
     <li v-for="city in data.cities"> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="radio" :name="data.name" class="radio" :value="city" v-model="proxySelected"> 
 
      {{city}} 
 
      </label> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</template>

Answer 2

使用v-model做到這一點： <input type="checkbox" v-model="italy">

並添加VUE將創建一個數組italy您可以像{{ italy.join(' - ') }}