Vue.js中v-bind与v-for无法为组件模板img填充src求助

你的代码存在两个核心问题，直接导致了img的src属性为空：

• 没有通过Vue标准的props机制接收父组件传递的links数组，反而手动操作DOM属性获取值，违背了Vue的响应式设计逻辑，数据传递过程出现异常。
• 额外添加的isReady变量和mounted钩子中的DOM操作完全冗余，还可能干扰数据的响应式更新流程。

修正后的gallery组件代码 #

Vue.component('gallery', {
  // 定义props接收父组件传递的links数组
  props: {
    links: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  template: `
    <div v-if="links.length === 0">
      not ready
    </div>
    <div v-else>
      <image-grp v-for="src in links" :key="src">
        <img v-bind:src="src">
      </image-grp>
    </div>
  `
});

关键修正说明 #

1. 用props接收数据：这是Vue组件间数据传递的标准方式，能保证数据的响应式和准确性，避免手动操作DOM带来的异常。
2. 简化状态判断：直接通过links.length === 0判断是否有图片链接，替代冗余的isReady变量。
3. 添加v-for的key属性：符合Vue列表渲染的规范，避免重复渲染或排序异常。

额外检查点 #

如果image-grp是你自定义的组件，必须确保它的模板包含插槽（<slot></slot>），否则内部的<img>无法被正常渲染。示例如下：

Vue.component('image-grp', {
  template: `<div class="image"><slot></slot></div>`
});

内容的提问来源于stack exchange，提问作者WEBjuju