在Vuejs上切换单选按钮后选定的文件消失

Posted 2023-02-22

技术标签:

【中文标题】在Vuejs上切换单选按钮后选定的文件消失【英文标题】：A selected file disappears after switching radio buttons on Vuejs 【发布时间】：2018-12-18 16:50:58 【问题描述】：

我试图让用户选择两个单选按钮之一，根据用户的选择，它会显示 input[type='file'] 或 input[type ='文本']。然后，用户可以选择文件或输入文本。

我可以使用 Vuejs 做到这一点，但有一个问题。

当用户选择一个文件并来回切换单选按钮时，选定的文件就会消失。

这是我的代码：

const vm = new Vue(
  el: '#app',
  data: 
    picked: '',
  ,
  methods: 
    isTest1: function () 
      return (this.picked === 'test1');
    ,
    isTest2: function () 
      return (this.picked === 'test2');
    ,
  
);

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>

    <div id="app">
      <input type="radio" id="test1" name="test" value="test1" v-model="picked"><label for="test1">Test1</label>
      <input type="radio" id="test2" name="test" value="test2" v-model="picked"><label for="test2">Test2</label>

      <span> picked </span>

      <div>
        <input type="file" v-if="isTest1()">
        <input type="text" v-if="isTest2()">
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="js/script.js"></script>
  </body>
</html>

我为 input[type='file'] 尝试了v-model，但它不支持 input[type='file'] 的 v-model。

https://github.com/vuejs/Discussion/issues/24

我还在 input[type='file'] 和 input[type='radio'] 上尝试了 v-on:change，我可以在用户选择或更新文件，但我不知道如何相互交互。

如何在用户切换单选按钮时保持选定的文件？

谢谢。

【问题讨论】：

检查此代码笔：codepen.io/Atinux/pen/qOvawK 【参考方案1】：

我在 GitHub 上问了同样的问题，一位绅士 (https://github.com/LinusBorg) 回答了我的问题。

解决方案是将v-if 替换为v-show。

这里是解释v-if和v-show区别的参考。

https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

另外，这里是我在 GitHub 上的问题的链接：