如何在 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 type="text" disabled="false" />

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

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

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

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

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

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

Answer 2

这里的问题是您将输入值绑定到赞助商v-model="sponsor"，所以当您开始输入时，赞助商会获取值并禁用输入，

你必须设置一个标志来知道赞助商的值是否来自路由，并使用该标志应用禁用逻辑。或者直接使用:disabled上的$route.query.sponsor(:disabled="$route.query.sponsor")

<input :disabled="isFromRoute" v-model="sponsor" />

mounted: function() {
  if (this.$route.query.sponsor) {
    this.sponsor = this.$route.query.sponsor
    this.isFromRoute = true //set the flag, make sure to have it in your data section
  }
},

Answer 3

试试这个：

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