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'>")

每个图像都存储在推文数组中，如下所示：

tweet.user.profile_image_url

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

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

不幸的是，由于我在控制台中从Vue收到此错误消息，这似乎不再可能了：

模板语法错误media =“＆lt; img SRC = “{{tweet.user.profile_image_url}}” ＆gt;“中：内部属性中的插值已被删除。使用v-bind或结肠速记代替。例如，而不是＆lt; div id =“{{ val}}“＆gt ;,使用＆lt; div：id =”val“＆gt;。

如何使用v-bind或：media =“...”语法将图片网址嵌入到media属性中？我能想到的就是直接绑定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) + '">';
      }
  },
}

如何将图像URL与Vue.js绑定到Framework7列表项“media”属性？

1 个答案: