如何向add-to-calendar-button组件传递动态数据？插值尝试无效

直接在HTML属性里写变量名（比如name=interview.interview_title）是无效的，因为HTML会把它当成普通字符串解析。根据你使用的技术栈，这里提供几种可行的动态传值方案：

1. 原生JavaScript（无框架） #

先获取组件DOM元素，再通过JS动态设置属性：

// 假设interview是已定义的对象
const interview = {
  interview_title: "前端工程师面试",
  start_date: "2024-12-23",
  end_date: "2024-12-23"
};

// 获取组件元素
const calendarBtn = document.querySelector('add-to-calendar-button');

// 动态设置属性
calendarBtn.name = interview.interview_title;
calendarBtn.startDate = interview.start_date;
calendarBtn.endDate = interview.end_date;
// 其他需要动态设置的属性同理

2. Vue.js #

使用v-bind（简写为:）绑定动态属性，Vue会自动解析变量：

<add-to-calendar-button
  :name="interview.interview_title"
  :options="['Google','Yahoo','iCal','Outlook.com']"
  location="World Wide Web"
  :startDate="interview.start_date"
  :endDate="interview.end_date"
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
  inline
></add-to-calendar-button>

注意：options如果需要动态的话，也要用数组形式绑定，不要用字符串。

3. React.js #

在JSX中用大括号{}包裹变量来绑定属性：

<add-to-calendar-button
  name={interview.interview_title}
  options={['Google','Yahoo','iCal','Outlook.com']}
  location="World Wide Web"
  startDate={interview.start_date}
  endDate={interview.end_date}
  startTime="10:15"
  endTime="23:30"
  timeZone="America/Los_Angeles"
  inline
></add-to-calendar-button>

和Vue一样，options要传数组类型，不是字符串拼接的形式。

额外注意 #

• 确保interview对象已正确定义，且interview_title等属性有有效值，避免出现undefined。
• 如果interview数据是异步获取的（比如从接口请求），要确保数据加载完成后再渲染组件，或者在数据更新时重新设置组件属性。

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