YuShu Hsiao

1.

single checkbox: checkbox  綁定的值預設的值是 true / false

multi checkbox :可以將值綁定在陣列裡面(checkboxArray)

<div id="app">
  <h4>single checkbox</h4>
  <div class="form-check">
   <input type="checkbox" class="form-check-input" id="check1" v-model="checkbox1">
   <label class="form-check-label" for="check1"> Single checkbox </label>
  </div>
	
  <h4>Multi checkbox</h4>
  <div class="form-check">
   <input type="checkbox" class="form-check-input" id="check2" value="雞" 
    v-model="checkboxArray">
   <label class="form-check-label" for="check2">雞</label>
  </div>
  <div class="form-check">
	<input type="checkbox" class="form-check-input" id="check3" value="豬" 
     v-model="checkboxArray">
	<label class="form-check-label" for="check3">豬</label>
  </div>
  <div class="form-check">
	<input type="checkbox" class="form-check-input" id="check4" value="牛" 
     v-model="checkboxArray">
	<label class="form-check-label" for="check4">牛</label>
  </div>
<p>晚餐火鍋裡有 <span v-for="item in checkboxArray">{{item}}</span>。</p>
</div>
<script>
	var app = new Vue({
		el: '#app',
		data: {			
			checkbox1: false,
			checkboxArray: []			
		},
	});
</script>

執行結果:

進階 multi checkbox

實務上，在GridView上面通常會有一個checkbox是可以全選/全不選，

例如:

可以參考的做法，就是把上面那一顆checkbox binding在一個變數，

然後在watch裡面去監控這個變數

watch: {   
	IsSelectAll: function () {
		let me = this;
		if (me.IsSelectAll === true) {
            // If Select All
			me.checkBoxArray = [];
			me.result.forEach(function (item) {
                //將所有的資料都push到 multi checkbox對應的Array
				me.checkBoxArray.push(item.Id);
			});
		}
		else {
            // Clear Array
			me.checkBoxArray = [];
		}
	}
},

2.radio button

如果要顯示的資料是陣列的話，value 要記得用 :value去綁定來源的value

<div id="app">
	<h4>Radio Button</h4>
	<div class="form-check" v-for="item in RadioResoutce">
		<input type="radio" class="form-check-input" :value=item.value v-model="singleRadio">
		<label class="form-check-label" for="radio2">{{item.text}}</label>
	</div>
	<p>晚餐火鍋裡有 {{singleRadio}}。</p>	
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {			
		singleRadio: '',
		RadioResoutce: [{
			value: 'beef',
			text: '牛'
		}, {
			value: 'pork',
			text: '豬'
		}, {
			value: 'chicken',
			text: '雞'
		}]		
	},
});
</script>

執行結果:

3.select 下拉式選單

跟radion button 一樣 如果要顯示的資料是陣列的話，value 要記得用 :value去綁定來源的value

<div id="app">
	<h4>Select</h4>
    <select name="" id="" class="form-control" v-model="selected">
		<option value="" disabled>--請選擇--</option>
		<option v-for="item in seletResouce" v-bind:value=item.value>{{item.text}}</option>
	</select>	
</div>
<script>
var app = new Vue({
	el: '#app',
	data: {			
		selected: '',
		seletResouce: [{
			value: '1',
			text: '標題1'
		}, {
			value: '2',
			text: '標題2'
		}, {
			value: '3',
			text: '標題3'
		}],		
	}
});
</script>

小技巧:如果選項"請選擇"在使用者選完之後就不讓使用者重新選擇，可加上disabled 屬性

就會如下圖所示，選完標題一之後，請選擇就是disabled ，無法在選擇

4.利用 v-for 產生多個image

後端再產生image的路徑時，有幾點需要注意

Service的部分，

fileUploadPath 是圖片的檔案夾路徑，利用Path.Combine將路徑還有檔案名稱合併為一個完整的路徑

整理好的物件再透過ViewBag傳到前端

前端，宣告一個物件接收ViewBag傳來的路徑資料

<script type="text/javascript">        
 var injectObj = {
  pictureInfo:JSON.parse('@Html.Raw(Json.Encode(ViewBag.PictureInfo))')
 }
</script>

Vue - Initial data

最後在HTML內使用v-for將路徑資訊binding給image

<button v-for="info in pictureInfo" class="icon-select">
  <img :src=info.ImagePath width="100%" height="100%" alt="" />
</button>