时间戳

首页 > 解决方案 > 在Vuejs上切换单选按钮后选定的文件消失

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

问题描述

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

我可以使用 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>

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

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

我还尝试v-on:change了input[type='file']和input[type='radio']，当用户选择或更新文件时，我可以捕捉到事件，但我不确定如何相互交互。

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

谢谢你。

标签： javascriptvue.js

解决方案

我在 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 上的问题的链接：

https://github.com/vuejs/vue/issues/8520

推荐阅读