无效的道具：道具“标题”的类型检查失败。期望值为 ** 的字符串，得到值为 ** 的数字

Question

在我下面的代码中，我使用的是 Vue js，我正在显示来自 JSON API 的数据，所以这里在模态中 title 应该是动态的，我写它如下，它在单击两次时起作用，但在第一次点击我得到了上面提到的错误。它还使hidemodal()函数的取消按钮崩溃 有人可以帮忙吗？

<script>
  export default {
    name: 'light-table',
    components: {

    },
    data() {
      return {
          modalShow: false,
          buildingId: null,
          Building:[],
        projects,
        currentPage: 1
      };
    },

methods:{
 showModal(buildingId) {
      this.$root.$emit("bv::show::modal", "modal-1", "#btnShow");
      this.buildingId = buildingId;
          
    },

    hideModal() {
      this.$refs["my-modal"].hide();
    },
    
mounted: function(){
    BuildingsService.getOneBuilding(`${this.$route.params.id}`).then((response) => {
      this.Building = response.data.response;

console.log(this.Building.floors,"data floor");

    });

    }
  
},}
</script>

<b-modal  v-for="(flatno,index) in Building.flats" :key="index"  v-if="flatno._id.includes(buildingId)"
            id="modal-1"
          
            :title="flatno.flat_number"
            ref="my-modal"
            hide-footer
          >

           <b-textarea
              id="question-input"
              type="text"
              placeholder="Description Proposal"
            v-bind:active-hover="true"
              required
            />
            <br />
            <b-row class="input-info">
              <input
                class="price-info"
                type="number"
                placeholder="price Offer"
               
                required
              />

              <select class="currency-info" >
                <option value="" selected disabled>Currency</option>
                <!-- <option>American Dollar</option> -->
                <option>Turkish Lira</option>
              </select>
            </b-row>

            <br />
            <input
              class="delivery-input"
              type="number"
              placeholder="delivery time"
             
              required
            />
            <br />

            <footer id="modal-1___BV_modal_footer_" class="modal-footer">
              <b-button
                class="cancel-button"
                data-dismiss="modal"
                target="_blank"
                @click="hideModal()"
                >Cancel</b-button
              >
              <b-button
                class="answer-button"
                data-dismiss="modal"
                target="_blank"
                @click="PostSolution()"
                >submit</b-button
              >
            </footer>
       
  </b-modal>

提前致谢

Answer 1

如果错误是title，那么问题是title prop 期望值是一个字符串，但你传入的是一个数字：

:title="flatno.flat_number"

您应该将此值转换为字符串：

:title="flatno.flat_number.toString()"