謝辞

技術的に可能かどうか分からないままに質問しているので、おかしな質問をしているかもしれません。
ご容赦願います。

やりたいこと

v-htmlのarticle.contentを加工したい。

やってみたこと

methods.fetchArticles.axios.get.then以下でarticles[].contentを直接加工できればよいのですが、うまく書き換えられませんでした…。
次に、v-htmlでarticle.contentを渡せれば良いと考えましたが、func(article.content)で引数をもたせることができません。
export default.computed:func() => ...を追加してみましたが、この方法ではうまく行かないようです。

ソース

加工前のものです。

<template>
  <ul>
    <li class="news__article" v-for="article in articles" :key="article.id">
      <div v-html="article.content"></div>
    </li>
  </ul>
</template>

import axios from "axios";
export default {
  components: {},
  data() {
    return {
      articles: null
    };
  },
  methods: {
    fetchArticles() {
      axios
        .get("<URL>")
        .then(res => {
          this.articles = res.data.contents;
        });
    }
    // func() {...}
  },
  mounted() {
    this.fetchArticles();
  }
};

手を加えるとしたら、export.default側のarticles[].contentを書き換えるか、templateのartile.contentを書き換えるかだと思いますが、そもそも可能なのかどうかも分かっていません。

次の課題：v-forレンダリング

このアプローチだと変更はされても画面に描画されない可能性がある、というのは理解しています。
現状ではまだそこまで行っていないので、今回の質問とは別にしようと思います。

追記：res.data.contents

後で書き換えるので特に重要とは思いませんが、念のため。

{
    articles: [
        {
            id: (int),
            content: (str)
        }
    ]
}

行動規範の内容に同意します

回答1件

ベストアンサー

上手く行かなかった理由がよくわからないですが、事前に書き換えるならcomputedを使っていはどうでしょう。

vue
1<template>
2<div>
3  <div v-for="num in upperCaseNums" :key="num">
4    <p>
5       {{ num  }}
6    </p>
7  </div>
8</div>
9</template>
10
11<script>
12{
13  data() {
14    return {
15      nums: ['one', 'two', 'three', 'four']
16    }
17  },
18  computed: {
19    upperCaseNums() {
20      return this.nums.map((num) => num.toUpperCase())
21    }
22  }
23}
24</script>