javascript - 使用 push() 添加新元素后，VueJS 检测 DOM 何时准备好

Question

在 vueJS 中我有一个 <table> 。如果我单击一个按钮，将使用以下命令将新行插入到表中:

this.rows.push({
        title: '',
        price: ''
      });

问题是我正在使用这个函数:

$(".price").numeric({
        decimal: false,
        negative: false
      });

这是一个强制输入只能为整数的 jquery 函数。 因此，当添加具有输入的新行时，上述函数不再起作用。

如果我添加一个新行并运行

$(".u-price").numeric({
        decimal: false,
        negative: false
      });

这将使新行只接受整数

我也尝试过像这样一次完成所有操作:

addRow() {
      this.rows.push({
        title: '',
        price: '',
      });
      $(".price").numeric({
        decimal: false,
        negative: false
      });
    },

要立即切换数字助手，但它不起作用。 那么如何检测何时添加新行，以便之后运行数字助手？

Answer 1

我会按原样使用指令。

Vue.directive('numeric', {
  inserted(el) {
    $(el).numeric({
      decimal: false,
      negative: false
    })
  }
})

在模板中:

<input v-numeric type="text" />

Working pen .