Question

＆＃13;

@Scripts.Render("~/bundles/script/vue")
<script>
var vm = new Vue({
			el: '#holiday-vue',
			data: {
				holidays:  @Html.Raw(Json.Encode(Model)),
				tableHeader: 'Local Holidays',
				holidayWarning: true,
				dateWarning: true
			},
      methods: {
      addHoliday: function () {
      this.holidays.LocalHolidays.push(this.holidays.DefaultHolidayViewModel);
				},
   });
	</script>

＆＃13;

<div id="holiday-vue">
  <div class="form-group form-group-sm">
    <table id="tableID">
      <thead>
        <tr>
          <th>Holiday</th>
          <th>Date</th>
        </tr>
      </thead>

      <tbody v-for="h in holidays.LocalHolidays">
        <tr>
          <td class="col-sm-3">
            <input type="text" placeholder="Holiday Name" required="required" v-model="h.Name" />
          </td>
          <td class="col-sm-3">
            <input id="date" type="text" placeholder="mm/dd/yyyy" required="required" class="form-control datepicker" v-model="h.Date" />
          </td>
        </tr>
      </tbody>
    </table>
    <div>&nbsp;<span v-on:click="addHoliday()"><a href="#"><i class="fa fa-plus"></i> Add Holiday</a></span></div>
  </div>
</div>

＆＃13;

我用过＆＃34; push＆＃34;向表中添加新行。新行将添加到所有行的末尾，但是＆＃34; datepicker＆＃34;不适用于新添加的行。对于其余的行，它工作正常。

Answer 1

首先，我不得不说混合使用JQuery和Vue并不是一个好主意。

问题：

Vue基于Virtual Dom，因此，一旦Vue重新渲染，您最好使用$('.datepicker').datepicker()初始化每个DatePick Dom元素。

在您的代码中，添加假期时，Vue会创建一个新输入，但新输入不会应用.datepicker()。

基于Vue LifeCycle的一种快速解决方案，您需要挂钩已更新/已挂载，以确保使用input.datepicker初始化所有新.datepicker()。（如果删除函数=更新，您将看到与您的问题相同的问题）

你可以查看How to use a jQuery plugin inside Vue或谷歌搜索，你会发现更多。

PS：抱歉我的英语不好...... :(

＆＃13;

$('.datepicker').datepicker()
var vm = new Vue({
    el: '#holiday-vue',
    data: {
      holidays:  {
        LocalHolidays: [{Date:'2017/01/01',Name:'A'}, {Date:'2018/01/01',Name:'B'}],
        DefaultHolidayViewModel: {Date:'2019/01/01',Name:'None'}
      },
      tableHeader: 'Local Holidays',
      holidayWarning: true,
      dateWarning: true
    },
    mounted: function() {
      $('.datepicker').datepicker()
    },
    updated: function () {
      $('.datepicker').datepicker('remove')
      $('.datepicker').datepicker()
    },    
    methods: {
      addHoliday: function () {
        this.holidays.LocalHolidays.push(this.holidays.DefaultHolidayViewModel);
        
      }
    }
 });

＆＃13;

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

<div id="holiday-vue">
  <div class="form-group form-group-sm">
    <table id="tableID">
      <thead>
        <tr>
          <th>Holiday</th>
          <th>Date</th>
        </tr>
      </thead>

      <tbody v-for="h in holidays.LocalHolidays">
        <tr>
          <td class="col-sm-3">
            <input type="text" placeholder="Holiday Name" required="required" v-model="h.Name" />
          </td>
          <td class="col-sm-3">
            <input type="text" placeholder="yyyy/mm/dd" required="required" class="form-control datepicker" data-date-format="yyyy/mm/dd" v-model="h.Date" />
          </td>
        </tr>
      </tbody>
    </table>
    <div>&nbsp;<span v-on:click="addHoliday()"><a href="#"><i class="fa fa-plus"></i> Add Holiday</a></span></div>
  </div>
</div>

＆＃13;

datepicker不适用于添加到表

1 个答案: