Vue轮播——设置图标为导航标签

Question

我正在使用这个 vue 旋转木马 package，我正在尝试将图标设置为导航按钮，如下所示：

<carousel
  :perPage="1"
  :navigationEnabled="true"
  :navigationNextLabel="'<i class="material-icons">keyboard_arrow_right</i>'"
  :navigationPrevLabel="'<i class="material-icons">keyboard_arrow_left</i>'"
>
  <slide v-for="testimonial of testimonials" :key="testimonial.id">
    <img v-if="testimonial.image" :src="testimonial.image.data.path" class="is-96x96">
    <h4>{{ testimonial.title }}</h4>
    <p>{{ testimonial.excerpt }}</p>
  </slide>
</carousel>

但是，由于某种原因，它不起作用，我在 html:

中将其作为输出

Answer 1

这里的道具不是动态的，所以代码应该是

<carousel
  perPage="1"
  :navigationEnabled="true"
  navigationNextLabel="<i class='material-icons'>keyboard_arrow_right</i>"
  navigationPrevLabel="<i class='material-icons'>keyboard_arrow_left</i>"
>
<slide v-for="testimonial of testimonials" :key="testimonial.id">
  <img v-if="testimonial.image" :src="testimonial.image.data.path" class="is-96x96">
  <h4>{{ testimonial.title }}</h4>
  <p>{{ testimonial.excerpt }}</p>
</slide>
</carousel>

Vue轮播——设置图标为导航标签

Vue carousel - setting icons as navigation labels

carousel

vue.js