Question

我不太了解这种行为。

在视图中，当处理未设置值属性的单选输入元素时，单击一个单选按钮可将其全部打开。为什么会这样？

我知道解决方案是为每个值添加一个值。在常规HTML中不会发生这种情况。

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style>
      
  </style>
</head>
<body>
    <div id="multiple_radios">
        <input type="radio" id="PC" v-model="picked">
        <label for="PC">PC (Windows)</label>

        <input type="radio" id="Mac" v-model="picked">
        <label for="Mac">Mac</label>

        <p>{{ picked }}</p>
    </div>
  <script>
      const multiple_radios = new Vue({
          el: '#multiple_radios',
          data : {
              picked : ''
          }
      });
  </script>
</body>
</html>

Answer 1

不设置值时，它们都是undefined。因此，当您单击1个单选按钮时，picked的值也将设置为undefined。这就是为什么两个单选按钮都被选中的原因。

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style>
      
  </style>
</head>
<body>
    <div id="multiple_radios">
        <input type="radio" id="PC" v-model="picked">
        <label for="PC">PC (Windows)</label>

        <input type="radio" id="Mac" v-model="picked">
        <label for="Mac">Mac</label>

        <p>Is undefined? {{ picked  == undefined }}</p>
    </div>
  <script>
      const multiple_radios = new Vue({
          el: '#multiple_radios',
          data : {
              picked : ''
          }
      });
  </script>
</body>
</html>

Answer 2

我认为您必须在输入中添加属性value。当您单击收音机时，将设置picked。如果您不单击它，则picked的值将保持不变。

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <style>
      
  </style>
</head>
<body>
    <div id="multiple_radios">
        <input type="radio" id="PC" value="PC" v-model="picked">
        <label for="PC">PC (Windows)</label>

        <input type="radio" id="Mac" value="Mac" v-model="picked">
        <label for="Mac">Mac</label>

        <p>{{ picked }}</p>
    </div>
  <script>
      const multiple_radios = new Vue({
          el: '#multiple_radios',
          data: {
             picked : null
          }
      });
  </script>
</body>
</html>

没有值的VueJs单选按钮会打开所有单选输入元素

2 个答案: