时间戳

首页 > 解决方案 > 没有值的VueJs单选按钮打开所有单选输入元素

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

问题描述

我不太理解这种行为。

在处理没有设置值属性的单选输入元素时，单击一个单选按钮会打开所有单选按钮。为什么是这样？

我知道解决方案是为每个添加一个值。在常规 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>

标签： javascripthtmlvue.js

解决方案

当您不设置该值时，它们都是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>

推荐阅读