标签: v-model

抱歉，如果这是一个非常简单的问题，我尝试按照此处的一些答案进行操作，但我无法进行..

我想基于第一个对象向数组添加一个NEW对象

我发现可行的方式是这样的：

    new Vue({
    el: "#app",
    data: {
       name: '',  //name isnt inside and object
     //failedExample: {name: ''}
        array: []
    },
    methods: {
        add(){
            this.array.push({name: this.name}) // i push a key:value
          //this.array.push(failedExample) // what i wished to do
        }
    }
});

https://jsfiddle.net/myrgato/6mvx0y1a/

我知道，通过使用带注释的array.push，我将一遍又一遍地向对象添加相同的引用，因此当我更改failExample.name的值时，它将在数组的所有位置发生变化。有没有办法做到这一点？像，我添加第一个对象，然后添加下一个对象作为新对象而不是引用？

<textarea name="" id="" cols="30" rows="10" v-model="$store.state.user.giftMessage | truncate 150"></textarea> 我尝试创建一个自定义过滤器：

filters: {
    truncate(text, stop, clamp) {
        return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
    }
}

但是当我将其放入输入的v模型中时，构建并没有中断...

有什么建议吗？

我有一个与此处报告的示例非常相似的 Vue 组件：

watch: {
    query(n, o) {

        // Display loading animation
        this.loading = true;

        // Search debounced
        this.debouncedSearchUser();
    }
},

query使用v-model以下方法绑定到文本输入的字符串变量在哪里：

data() {

    return {
        query: "",
        loading: false,
        results: []
    }
},

一切正常，除了在 android 的 chrome 上，手表触发器只触发一次（当query从""我写的任何内容更改时）。

任何的想法？

编辑：

问题似乎与v-model指令有关：我对本机 javascript 事件进行了一些实验，并且在我取消对输入的关注之前，不会更新 v-model 的值。如果有人对这里感兴趣是绑定：

<input v-model="query" class="input-text-light pad-s-m f-m"/>

有什么办法可以使用 watch 和 来解决这个问题v-model？

我有一个通过 v-for 创建的文本输入字段列表，其中包含v-model一个数组。我想向数组添加元素，从而创建另一个输入字段。

到目前为止一切正常。问题是新的输入字段以某种方式都被分配了相同的索引 (?) 或者其他正在发生的事情导致它们显示相同的值。

我制作了这个 jsfiddle来展示我的意思。如果您按两次按钮，然后尝试编辑新输入框之一，则所有新输入框都将获得编辑后的值。我只想要编辑过的输入框来显示输入值。

我想我在这里忽略了一些东西。有没有人可以帮忙解决这个问题？

Javascript：

new Vue({
  el: '#app',
  data: {
    items: [{name: "one", id: 0}],
    template: {
        name: "two",
        id: 2,
    },
  },
   methods: {
    addRow: function(){
    this.items.push(this.template);
    this.items[this.items.length - 1].id = Math.random();
    }
  }
  })

HTML：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(item,index) in items" :key="item.id">
  <input v-model="item.name">
  </div>
  <button v-on:click="addRow">
  Add row
  </button>
  <div>Array content: {{items}}</div>
</div>

用法： 我得到的截图

我正在制作一个组件，它是一个复选框的包装器（我对“文本”和“数字”类型的输入做了类似的处理），但我无法正确绑定传入的值。

我的组件是：

<template>
  <div class="field">
    <label :for="name" class="label">
      {{ label }}
    </label>
    <div class="control">
      <input :id="name" :name="name" type="checkbox" class="control" :checked="value" v-on="listeners" />
    </div>
    <p v-show="this.hasErrors" class="help has-text-danger">
      <ul>
        <li v-for="error in errors" :key="error">{{ error }}</li>
      </ul>
    </p>
  </div>
</template>
<script>
export default {
  name: 'check-edit',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    errors: {
      type: Array,
      default: () => []
    }
  },
  mounted () …

这是我的代码：

<input
   v-model="comb.inactive"
   type="checkbox"
   @click="setInactive(comb.id_base_product_combination)"
>

我需要在 v 模型上应用comb.inactive 的反转。

这是我尝试过的：

<input
    v-model="comb.inactive == 1 ? 0 : 1"
    type="checkbox"
    @click="setInactive(comb.id_base_product_combination)"
>



<input
    v-model="comb.inactive == 1 ? false : true"
    type="checkbox"
    @click="setInactive(comb.id_base_product_combination)"
>

你还有其他想法吗？

我从 API 中获得了options.customerdata.showbuttonas 的值true，所以现在开关处于开启状态。

我希望开关处于关闭状态，因此v-model="false"应该给出。但尝试给予

v-model="!(options.customerdata.showbutton)"

不起作用并显示错误。如何实现这一目标？

<b-form-checkbox v-model="options.customerdata.showbutton" name="logo-display" switch >
</b-form-checkbox>

由于后端的某些原因，他们使用 0 或 1，而不是布尔值的 false 或 true。

因此，当我尝试使用 API 中的布尔数据时，TS 抱怨：

// settings.crawl_on outputs 0 or 1\n<input\n v-model=\xe2\x80\x9csettings.crawl_on\xe2\x80\x9d\n type="checkbox"\n/>\n

我尝试添加以下代码，但它也不起作用：

true-value="1"\nfalse-value="0"\n

TS 说：

\n

（属性）InputHTMLAttributes.checked？：任何[] | 设置| 布尔\n类型“number”不可分配给类型“any[] | 设置 |\nBooleanish'.ts(2322)runtime-dom.d.ts(629, 3): 预期类型来自属性 'checked'，该属性在类型\n'ElementAttrs' 上声明

\n

有没有办法覆盖这个或者什么是正确的用法？

这是我在做什么： 我有一个表单集组件，它通过 ajax 获取数据来填充表单集。用户可以从表单修改这些数据并提交。

问题：这很好用。但是，我注意到如果我导航到另一个页面然后点击浏览器“返回一页”按钮，表单在那里（模板中的 DOM）但是是空的。v-model 输入字段中不再有数据绑定...

大多数关于此行为的帖子都与我不使用的 vue-router 相关。

我认为它可能需要处理生命周期钩子......实际上，在我的组件上，我在“挂载”时获取数据。但是，如果是这样，哪个生命周期？

我也尝试过“保持活力”但没有成功。

我在我的组件上放了一些详细的日志，试图在浏览器返回时捕获生命周期钩子，但没有打印出来......

beforeCreate: function() {
    console.log('---- BEFORE CREATE ----> ')
},
created: function() {
    console.log('---- CREATED ----> ')
    this.getModelObjects();
},
beforeMount: function() {
    console.log('---- BEFORE MOUNT ----> ')
},
mounted: function() {
    console.log('---- MOUNTED ---->')
    this.getModelObjects();
},
beforeUpdate: function() {
    console.log('---- BEFORE update ----> ')
},
updated: function() {
    console.log('---- UPDATED ----> ')
},
beforeDestroy: function() {
    console.log('---- BEFORE DESTROY ----> ')
},
destroyed: function() {
    console.log('----  DESTROYED ----> …

我在我的 vue 组件中使用了一个简单的文本区域。：

<input v-model="someRootProperty"/>

例如，我想将此输入封装在另一个组件中

<template>
    <div>
        <div>...</div>
        <input v-model="???"/>
    </div>
</template>

我想用

<my-component v-model="someRootProperty" />

相反，他们将其绕过到组件内部的输入。

我应该在组件内部做什么才能将其输入 v-model 公开为组件 v-model？

我无法动态设置 v-model 。

如果我明确输入，它会起作用：

 <div class="form-group mr-3 mb-2">
     <input type="text"  
       v-model="form[filters][firstlastname]" 
     > 
</div>

但我想循环遍历一个包含 string 的对象，例如： 'form[filters][firstlastname]'

父级的表单具有以下属性：

data() {
   return {
     form: new Form({
        filters: {
        gender: [],
        firstlastname: 'My firstlastname'

因此，我从父组件将表单和过滤器传递到子组件中，这里是过滤器：

  let formFilters = { filters: [
      {
         type: 'text',
         property: 'form[filters][firstlastname]',        // <-- string 
        placeholder: 'Name',
     },
     {
        type: 'number',
        property: 'paginate', 
        placeholder: 'Max rows'
     },
   ]
}

子组件：（这里我循环遍历对象并生成输入字段）

<div v-for="(filter,index) in formFilters.filters" 
       :key="`${index}_${filter.property}`"
   >
      <input 
         v-if="filter.type === 'text' || filter.type === 'number'"
         :placeholder="filter.placeholder" 
         :type="filter.type"                
          v-model="filter.property"               //<--- …