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

disabled 不是布尔 属性。

该属性的状态意味着输入被禁用。

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

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

<input disabled ... />

或

<input disabled="" ... />

或

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

如果你这样做

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

仍然会因为属性disabled而导致禁用输入 - 由于非法的属性值而导致HTML无效。

在这里查看：

＆＃13;

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

＆＃13;

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

编辑：结果是Vue.js创作者准备了这个：

在布尔属性的情况下，它们的存在意味着真实，v-bind的工作方式略有不同。在这个例子中：
<button v-bind:disabled="isButtonDisabled">Button</button>
如果isButtonDisabled的值为null，undefined或false，则禁用的属性甚至不会包含在渲染元素中。

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

Answer 2

此处的问题是您将输入值绑定到赞助商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 3

试试这个：

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

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

3 个答案:

编辑：结果是Vue.js创作者准备了这个：