如何在vuejs的输入文本中添加禁用属性? [英] How to add disabled attribute in input text in vuejs?

问题描述

我有两个网址

• /注册

/register?sponsor=4

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

The /register route will give me a clean input text in which I can type everything
and the second route will bring a the same input but it has a value of 4 and it's disabled so users cannot modify it.
I managed to get params from router dynamic using vue-router and everything is fine,
but when I visit /register I get the clean input but as soon as I start typing the input will be disabled and I can only type one character.
This what I tried so far,
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>

推荐答案

这里的问题是你用 v-model="sponsor" 绑定输入值到sponsor，所以当你star输入，赞助商获取值并禁用输入，

The problem here is that you are binding the input value to sponsor with v-model="sponsor", so when you star typing, the sponsor get the value and disable the input,

您必须设置一个标志以了解sponsor 的值是否来自路由，并使用该标志应用禁用逻辑.或者直接在:disabled(:disabled="$route.query.sponsor")上使用$route.query.sponsor>

you have to set a flag to know if the value of sponsor comes from the route, and apply the disable logic with that flag. Or directly use the $route.query.sponsor on the :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
  }
},

这篇关于如何在vuejs的输入文本中添加禁用属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！