在 Vue.js 中按类将文本附加到多个元素

Question

我知道我想做的是直接修改 dom（在 vue.js 中不行），但是我能想到的唯一替代方案会创建更草率且更难以维护的代码。

问题

我正在使用 vue-i18n，根据用户当前选择的语言，我想将货币符号移动到价格元素的前面或后面（我有许多元素在许多页面上显示价格，实际上超过 150 个） .)

备择方案

我能想到的最好的替代方案是为每个需要交换的元素添加一个绑定，但要做到这一点，我必须在该网站有价格的 15 个单独页面中的每个页面中:class添加大量 + v-ifs+额外标记mapGetters上（+ vuex 逻辑）。我可能还必须在 css 中使用::beforeand ::after，为每种语言创建一个类，并在每种语言中添加符号content: ''。

新考虑的解决方案

我认为简单地使用一个mounted钩子（以便子视图完全渲染）然后调用一个函数在包含该类的所有元素之前或之后附加货币符号可能会更app.vue干净。nextTick()priceItem

这样，我就不会有所有额外的标记和v-ifs 污染我的模板，尽管我会直接修改 dom，尽管只有在所有内容都渲染之后。

是否有任何替代方案可以让我获得我想要的简单性，但仍然使用 Vue 类型模式来完成它？

示例代码（app.vue）

   this.$nextTick(function () {

  // Get currently selected lang from i18n

  let lang = this.$i18n.locale

  // get correct currency symbol for selected language

  let symbol = ''

  switch (lang) {

    case 'ko':

      symbol = '₩'

      break

    case 'en':

      symbol = '$'

      break

    case 'ja':

      symbol = '¥'

      break

    case 'zh':

      symbol = '¥'

      break

    case 'es':

      symbol = '€'

      break

    case 'ru':

      symbol = '₽'

      break

  }

  // if lang is Korean append symbol after, else append before

  if (lang !== 'ko') {

    document

      .querySelector('priceItem')

      .insertAdjacentText('beforeBegin', symbol)

  } else {

    document

      .querySelector('priceItem')

      .insertAdjacentText('afterBegin', symbol)

  }

})

编辑：

想想看，这在道具中可能会更好computed，这样我就可以在用户更改语言时重新分配符号。

Answer 1

对于任何正在寻找 Vue 快速解决方案的人，我使用这个包来解决我的问题：https://github.com/vinayakkulkarni/vue-intl-numberformat我在模板中使用了以下格式：<vue-intl-numberformat&nbsp; &nbsp;locale="en-IN"&nbsp; &nbsp;format-style="currency"&nbsp; &nbsp;:currency="getCurrency"&nbsp; &nbsp;:number="item.price"&nbsp;/>...computed: {&nbsp; &nbsp;...mapGetters(['getCurrency'])}然后我根据 i18n 中主动选择的语言通过 getter 向其传递正确的货币。（在我的 vuex 商店中）&nbsp; getCurrency: (state) => {&nbsp; &nbsp; let activeLang = i18n.locale&nbsp; &nbsp; let currency = ''&nbsp; &nbsp; switch (activeLang) {&nbsp; &nbsp; &nbsp; case 'en':&nbsp; &nbsp; &nbsp; &nbsp; currency = 'USD'&nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; case 'ko':&nbsp; &nbsp; &nbsp; &nbsp; currency = 'KRW'&nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; case 'ja':&nbsp; &nbsp; &nbsp; &nbsp; currency = 'JPY'&nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; case 'es' || 'fr' || 'it':&nbsp; &nbsp; &nbsp; &nbsp; currency = 'EUR'&nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; case 'zh':&nbsp; &nbsp; &nbsp; &nbsp; currency = 'CNY'&nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; &nbsp; case 'ru':&nbsp; &nbsp; &nbsp; &nbsp; currency = 'RUR'&nbsp; &nbsp; &nbsp; &nbsp; break&nbsp; &nbsp; }&nbsp; &nbsp; state.currency = currency&nbsp; &nbsp; return state.currency&nbsp; }这似乎是迄今为止最干净的解决方案。