如何统一来自多个组单选按钮的文本？ (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

任何时候你需要一个基于其他值的值，你应该考虑使用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”是通过发出父级用来设置值的事件来完成的。

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(' - ') }}