【Vue.js, axios】axiosで取得したデータをdataに追加したい

Question

いつも大変お世話になっております。

現在Shopifyを利用してサイトを作成しています。
商品詳細ページにアクセスした際に、①商品全体の情報、②個別の商品に紐づいたメタ情報 の
２点を別々で取得する必要があり、取得の際にaxiosを利用して取得しています。

できれば一度の axios.get() でそれぞれの情報を取得することができれば良いのですが、
それはshopifyの仕様上不可能なようなので、やむなく１つめの axios.get() の内部で、
別で axios.get() を実行しています。

今回生じている問題ですが、
２つ目(１つ目の axios.get() の内部で実行している別のaxios)のaxiosで返ってきたデータを
data() の currentVariantMetafields に格納したいのですが、うまく格納されません。

調べてみるとアロー演算子を使用するのがよくないなど情報があるのですが、
当方エンジニアではなく付け焼き刃で行っているもので
アロー演算子からfunctions()の関数に変更してみても改善せずよくわからない状況になっています。

もし解決策が判る方がいらっしゃればご教授いただけますと幸いです。

それではどうぞ宜しくお願い致します。

###行いたいこと
data の currentVariantMetafields に selectCallback() 内で実行している
axiosで返ってきた値を格納したい。

###ソースコード

// eslint-disable-next-line import/no-extraneous-dependencies
import Vue from 'vue/dist/vue.min';
import axios from 'axios';

new Vue({
	
	delimiters : [ '${', '}' ],
	
	data(){
		return {
			
			siteUrl                  : '',
			productUrl               : '',
			currentVariant           : '',
			currentVariantMetafields : []
			
		};
	},
	
	created(){
		const currentUrl = new URL(window.location.href);
		this.siteUrl = currentUrl.origin;
		const params = currentUrl.searchParams;
		params.delete('variant');
		this.productUrl = currentUrl.href;
		
		// 商品情報を取得
		axios.get(`${this.productUrl}.js`)
				 .then((res) => {
					 // eslint-disable-next-line no-new,no-undef
					 new Shopify.OptionSelectors('product-select', {
						 product            : res.data,
						 onVariantSelected  : this.selectCallback,
						 enableHistoryState : true
					 });
				 })
				 .catch((err) => {
					 console.log(err);
				 });
	},
	
	methods : {
		
		selectCallback(variant, selector){
			// 商品情報のメタ情報を取得
			const variantUrl = `${this.siteUrl}/admin/products/${selector.product.id}/variants/${variant.id}/metafields.json`;
			
			axios.get(variantUrl)
					 .then((res) => {
						 this.currentVariantMetafields = res.data;
					 })
					 .catch((err) => {
						 console.log(err);
					 });
			
			// 出力して確認すると格納されていない
			console.log(this.currentVariantMetafields);
		}
		
	}
	
}).$mount('#app');

Answer 1

currentVariantMetafields を算出プロパティのどこからも返してないような気がしますが…。
メソッド側に書いていても、メソッドはイベントトリガーがあって初めて実行される処理です。

ちなみにアロー演算子が使えなかったのはVue.js（初代Vue）までなので、Vue2.xなら問題なく使えますよ。

Comments

[matsuo_basho]

コメントありがとうございます！

>currentVariantMetafields を算出プロパティのどこからも返してないような気がしますが…。

すみません、ポンコツすぎてこちらの意味がよくわからなかったのですが(泣)、
処理の流れとしては、

① created() の axios.get() 内で new Shopify.OptionSelectors() が実行される
② new Shopify.OptionSelectors()が実行されたタイミングで selectCallback() が実行される

この②の中で行われるaxios.get()で返ってきた値を currentVariantMetafields に格納したいです。

まずここまでの説明は理論的に合っていますでしょうか..？

[FKM]

理論は合っているようなので、だとするとmethod内にある

axios.get(variantUrl)
.then((res) => {
this.currentVariantMetafields = res.data;
console.log(curretnVariantMetaFields)

として、そこで値が取得できているでしょうか？