gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 14:30:31 25 4
gpt4 key购买 nike

我试图让用户选择两个单选按钮之一,根据用户的选择,它显示 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 ,我可以在用户选择或更新文件时捕获事件,但我不确定如何相互交互。

如何在用户切换单选按钮时保持所选文件?

谢谢。

最佳答案

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

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

这里引用解释v-ifv-show的区别。

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

此外,这是我在 GitHub 上的问题的链接:

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

关于javascript - 在 Vuejs 上切换单选按钮后,所选文件消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51272049/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com