動態綁定id，根據ref動態獲取元素解決不能動態綁定ref的問題;elementui框架中綁定動態的ref，動態綁定v-model

（一）、動態綁定id

//動態綁定id

<button @click="insertAtCursor(item,index)" type="button" :id="'btn'+index">插入字</button>
//<button @click="insertAtCursor(item,index)" type="button" :id="`btn${index}`">插入字</button>
methods:{
    insertAtCursor(){
        console.log(document.querySelector('#btn'+index));
        console.log(document.getElementById('btn'+index));//兩種方法均可
    }
}

打印結果：

（二）、ref在v-for循環中不能動他綁定，但可以根據根據元素的ref[index]動態的找到元素。因爲v-for循環中，ref動態綁定需要的唯一標誌還沒有加載完成（我是這麼理解的），可詳見vue官方文檔https://cn.vuejs.org/v2/api/#ref

在項目中我根據需求解決這個問題

<!--循環-->
<div style="display:flex;flex-direction:column;">
    <div class="el-textarea" v-for="(item,index) in shoppeList" :key="index">
//添加一個class，以便於區分打印的是否正確
        <textarea type="textarea" rows="10" autocomplete="off" :class="`class${index}`" ref="ttl"></textarea>
        <button @click="insertAtCursor(item,index)" type="button">插入字段</button>
    </div>
</div>
data(){
    return{
        shoppeList: [{id: 3,value: "name",},{id: 4,value: "sex"}],
    }
},
menthods:{ 
    insertAtCursor(item, index) {
        console.log(this.$refs.ttl[index])
    }
}

打印結果：

（三）注意：針對ref這種，我再使用elementui的時候，發現ref是可以綁定動態值的 ，這是基於在elemenui框架中表格加載完成以後，在渲染表格內部的元素，此時利用插槽可以拿到表格的index，這樣ref在使用的時候動態的ingdx就是有的

舉例：

<!-- elementui 框架表格中使用動態的ref -->
<el-table :data="shoppeList">
    <el-table-column prop="">
        <template slot-scope="scope">
            <div>
//綁定一個動態的id以至於區分
                  <textarea :rows="8" placeholder="請輸入內容 " :id="'textareaId'+scope.$index" 
                    :style="{color:scope.row.color}" :ref="'ttl'+scope.$index">
                </textarea>
              <el-button @click="insertField(scope.$index,scope.row)">點擊</el-button>
            </div>
		</template>
	</el-table-column>
</el-table>

data(){
    return{
       shoppeList: [ { id: 3, value: "name"}, { id: 4, value: "sex"}],
    }
},
methods:{
    insertField(index,item){
            console.log(index,item);
            console.log(this.$refs['ttl' + index]);
        }
}

打印:

（四）、動態綁定v-model

在v-for循環中動態綁定v-moldel

1、綁定item的key值，v-model是雙向綁定，這樣的話在更改texarea的時候，item的value值也隨之更改了。可優化成2

<div v-for="(item,index) in shoppeList" :key="index">
    <span>{{item}}</span>
    <textarea 	:rows="8" placeholder="請輸入內容 " :id="'textareaId'+index"  v-model="item.value">
    </textarea>
</div>

2.優化

綁定一個自定義的：在文本中輸入內容的時候他會給item添加一個content值，這樣在以後需要賦值的時候既可以用了。

<div v-for="(item,index) in shoppeList" :key="index">
    <span>{{item}}</span>
    <textarea 	:rows="8" placeholder="請輸入內容 " :id="'textareaId'+index"  v-model="item.content">
    </textarea>
</div>

效果：