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

我有2个网址

• /register

• /register?sponsor=4

The /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>

disabled is 不是布尔值属性。

单纯的presence该属性的意思是输入被禁用.

禁用的唯一允许的属性值是"disabled" and "".

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

<input disabled ... />

or

<input disabled="" ... />

or

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

如果你这样做

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

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

在这里查看：

<input type="text" disabled="false" />

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

编辑：事实证明 Vue.js 创建者已经准备好了：

对于布尔属性，它们的存在本身就意味着 true，v-bind 的工作方式略有不同。在这个例子中：

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

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

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