複数のグループのラジオボタンから取得するテキストを統合するにはどうすればよいですか？ （vue.js 2）このような

Question

マイVUE成分：私はまだ選択された各ラジオボタングループを統一するために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(' - ')); 
}); 

：このような

<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コード。このjavascriptコードは正常に動作しています。しかし、私はそれをvueコンポーネントを使って変更したい。したがって、javascriptコードはありません。しかし、私はまだ私が

私が欲しい

最初のプロットを説明します

を混乱していた：

私はチェルシー、マドリーを選択して、このような結果をユベントス場合：

チェルシー - マドリード - ユベントス

私はチェルシーとマドリーにこのような結果を選択した場合：

を

チェルシー - マドリード

私はラジオボタンをチェックするのであれば、それはテキストを表示します。ラジオボタンのチェックを外すと、テキストは表示されません

どのようにしてvueコンポーネントで実行できますか？

更新：ラジオボタンは、例えば

チェックを外すことができ

：

私はチェルシー、マドリーを選択して、このような結果をユベントス場合：

チェルシー - マドリード - ユベント

は、それから私は、マドリードのチェックを外し、このような結果： -

チェルシーこれを行うにユベントス

Answer 1

他の値は、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に設定して選択を解除します。私がコンポーネントに入っているので、 "値をnullに設定する"は、親が値を設定するために使用するイベントを発行することによって行われます。あなたがここに、Vueのを使用していない

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の配列を作成します。あなたのvueテンプレートで出力することができます{{ italy.join(' - ') }}