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中的語義日曆的價值

回答

相關問題