如何使用 Vue.js 将图像 url 绑定到 Framework7 列表项 "media" 属性？

Question

我正在使用 Framework7's Vue plugin 来显示推文列表。推文存储在 data():

的数组中

data () {
  return {
    tweets : []
  }
}

标记 (Jade) 如下所示：

f7-list(media-list='', v-for='tweet in tweets')
  f7-list-item(:title='tweet.text')

这非常有效，可以将数组中所有推文的列表打印到 GUI。 Framework7 中的 f7-list component 现在也允许添加这样的图像：

f7-list-item(media="<img src='image.jpg'>")

每张图片都存储在 tweets 数组中，如下所示：

tweet.user.profile_image_url

通常，我会做这样的事情来添加图像：

f7-list-item(media="<img src='{{tweet.user.profile_image_url}}'>")

不幸的是，这似乎不再可能了，因为我在控制台中收到来自 Vue 的错误消息：

template syntax error media="<img src="{{tweet.user.profile_image_url}}">": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

如何在此处使用 v-bind 或 :media="..." 语法将图像 url 嵌入到媒体属性中？我能想到的就是直接绑定URL：

f7-list-item(:media='tweet.user.profile_image_url')

但这行不通，因为我需要以某种方式添加 <img> 标签。

Answer 1

解决方案是使用过滤器：

翡翠标记

f7-list-item(:media='tweet | imgFilter')

Vue 组件脚本

export default {
  name: 'app',
  data () {
    return {
      tweets : []
    }
  }
  filters : {
      imgFilter : function (tweet) {
          return '<img src="' + filters.imgUrlFilter(tweet) + '">';
      }
  },
}

如何使用 Vue.js 将图像 url 绑定到 Framework7 列表项 "media" 属性？

How can I bind image url's to Framework7 list-item "media" attribute with Vue.js?

html

javascript

data-binding

html-framework-7

vuejs2