如何在vuejs的输入文本中添加禁用属性？

Question

我有 2 个网址

• /register

• /register?sponsor=4

该/register路由将给我一个干净的输入文本，我可以在其中输入所有内容
，第二个路由将带来相同的输入，但它的值为 4 并且它被禁用，因此用户无法修改它。
我设法使用 vue-router 从路由器动态获取参数，一切都很好，
但是当我访问时，/register我得到了干净的输入，但是一旦我开始输入，输入就会被禁用，我只能输入一个字符。
这是我到目前为止尝试过的，
HTML：

<input :disabled="sponsor ? true : false" v-model="sponsor" id="sponsor" type="number" class="form-control" name="sponsor" value="" required tabindex="14">  

Javascript Vuejs

<script type="text/javascript">
    var router = new VueRouter({
        mode: 'history',
        routes: []
    });
    new Vue({
        router,
        el: '#app',
        data () {
            return {
                cities: [],
                city: '',
                selectedCountry: '',
                sponsor: null
            }
        },
        mounted: function() {
            if (this.$route.query.sponsor) {
                this.sponsor = this.$route.query.sponsor
                console.log(this.sponsor)
            }
        },
        methods: {
            onChangeCountry() {
                axios.get('http://localhost:8000/api/cities/country/' + this.selectedCountry)
                .then(response => this.cities = response.data)
                .catch(error => console.log(error))
            }
        }
    });
</script>

Answer 1

disabled是不是布尔属性。

单纯的存在属性意味着输入被禁用。

禁用的唯一允许的属性值是"disabled"和""。

因此，这三个变体对于创建禁用输入是合法的：

<input disabled ... />

或者

<input disabled="" ... />

或者

<input disabled="disabled" ... />

如果你这样做

<input disabled="false" ... /> 

这仍然会仅仅因为属性disabled在其上而禁用输入- 除了由于非法属性值而导致无效的 HTML 之外。

在这里查看：

<input disabled ... />

因此，要解决您的问题，您需要找到一种方法，以便在您不想禁用它的情况下不在输入上创建该属性。

编辑：原来 Vue.js 创建者已经准备好了：

在布尔属性的情况下，它们的存在就意味着为真，v-bind 的工作方式略有不同。在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值为 null、undefined 或 false，则 disabled 属性甚至不会包含在呈现的元素中。

https://vuejs.org/v2/guide/syntax.html#Attributes