Vuejs - 获取vuejs中的语义日历的价值

我使用语义ui日历与Vuejs结合获取价值。使用日期选择器选择日期后，此日历未设置该值。所以我不能通过Vuejs保存日期。这是我的html：Vuejs - 获取vuejs中的语义日历的价值

<div class="ui calendar" id="date"> 
    <div class="ui input left icon"> 
     <i class="calendar icon"></i> 
     <input type="text" v-model="input.date"> 
    </div> 
</div>

我Vuejs：

var app = new Vue({ 
    el: "#app", 
    data: { 
     input: { 
      unique_number:"", 
      date: "", 
      description: "" 
     }, 
      inputErrors: [] 
    } 
});

任何想法？

来源

2017-07-07 user3089464

我相信这个博客帖子的地址是：https://vuejsdevelopers.com/ 2017/05/20/vue-js-safely-jquery-plugin /但你的问题归结为不正确的方法ming vue的工作方式与jquery相同（通过对dom元素进行操作），它不会。 – corse32

我在那里看不到日期选择器。尝试改变：

<input type="text" v-model="input.date">

到

<input type="date" v-model="input.date">

来源

2017-07-07 14:16:39 aprouja1

我从语义日历（https://github.com/mdehoog/Semantic-UI-Calendar）使用datepicker，而不是datepicker html。 – user3089464

试试下面的代码

var app = new Vue({ 
 
    el: "#app", 
 
    data: { 
 
     input: { 
 
     unique_number: '', 
 
     date: '', 
 
     description: '' 
 
     }, 
 
     inputErrors: [] 
 
    }, 
 
    methods: { 
 
     refreshCalendar: function() { 
 
     $('#date').calendar('set date', this.input.date) 
 
     } 
 
    }, 
 
    mounted() { 
 
     $('#date').calendar({ 
 
     onChange: function(date, text, mode) { 
 
      console.log('change: ' + date + " text: " + text + " mode: " + mode) 
 
      app.input.date = text 
 
     } 
 
     }); 
 
    } 
 
});

<script src="https://unpkg.com/vue"></script> 
 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" type="text/css" /> 
 
<link href="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/76959c6f7d33a527b49be76789e984a0a407350b/dist/calendar.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script> 
 
<script src="https://cdn.rawgit.com/mdehoog/Semantic-UI-Calendar/76959c6f7d33a527b49be76789e984a0a407350b/dist/calendar.min.js"></script> 
 

 

 
    <div id="app"> 
 

 
     <div class="ui calendar" id="date"> 
 
      <div class="ui input left icon"> 
 
       <i class="calendar icon"></i> 
 
       <input type="text" v-model="input.date"> 
 
      </div> 
 
     </div> 
 

 
     <h3> 
 
      output (look at mounted onchange part) 
 
     </h3> 
 
     <p>date: {{input.date}}</p> 
 

 
     <h3>input (look at refreshCalendar method)</h3> 
 
     <p> 
 
      if the value is changed somewhere else (like in this simple input text) call refreshCalendar 
 
     </p> 
 
     <input type="text" size="30" v-model="input.date" @change="refreshCalendar()"> 
 
    </div>

来源

2017-11-19 11:47:52

Vuejs - 获取vuejs中的语义日历的价值

回答

相关问题