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

Question

我有2个网址

• /register
• /register?sponsor=4

/register路线将给我一个干净的输入文本，我可以在其中输入所有内容 并且第二条路线将带来相同的输入，但它的值为4并且已禁用，因此用户无法对其进行修改。 我设法使用vue-router从路由器动态获取params，一切都很好， 但是当我访问/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

这里的问题是你使用v-model="sponsor"将输入值绑定到赞助商，所以当你星型打字时，赞助商获取值并禁用输入，

你必须设置一个标志来知道赞助商的价值是否来自路线，并使用该标志应用禁用逻辑。或者直接在$route.query.sponsor（:disabled）上使用: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 2

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 3

试试这个：

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