<div id="app">
  <div class="p-5">
    <h3>使用 ref 定義元素</h3>
    <input type="text" ref="inputDOM">

    <h3 class="mt-5">使用 ref 取得元件內的資訊</h3>
    <button type="button" @click="getComponentInfo">取得元件資訊</button>
    <card ref="card"></card>

    <h3 class="mt-5">進階，使用 ref 搭配 Bootstrap</h3>
    <button @click="openModal">開啟 Bootstrap Modal</button>
    <div class="modal" tabindex="-1" ref="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

const app = Vue.createApp({
  data() {
    return {
      bsModal: ''
    }
  },
  methods: {
    getComponentInfo() {
      console.log(this.$refs.card)
      // 直接操作資料也是可行的
      // 但是因為沒辦法確保title屬性一定存在，所以一般不會這樣做
      this.$refs.card.title='被更新的元件標題'
    },
    openModal() {
      this.bsModal.show();
    }
  },
  mounted() {
    // created時資料還沒準備好，故取用refs需要在mounted之後才取得到
    // refs是複數，以物件形式儲存
    console.log(this.$refs);
    // 可以直接操作該元素，在mounted生命週期時直接focus該input
    this.$refs.inputDOM.focus();
    this.$refs.inputDOM.value='3';


    // 
    this.bsModal = new bootstrap.Modal(this.$refs.modal)
  }
})

app.component('card', {
  data() {
    return {
      title: '文件標題',
      content: '文件內文'
    }
  },
  template: `
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">{{ title }}</h5>
          <p class="card-text">{{ content }}</p>
        </div>
      </div>
    `,
}).mount('#app');