Как проверить наличие значения в JSON-файле с помощью Vue.js?

Question

[Кирилл Красин]

Добрый день. Только начал изучать Vue.js, есть задача получить данные из JSON-файла (который генерирую сам) и перед выводом его в теле документа проверить на наличие значения переменной.

Структура JSON файла:

{
	"appid": "280",
	"name": "Half-Life: Source",
	"developer": "Valve",
	"publisher": "Valve",
	"localization": "sts",
	"localization_released": "2017\/09\/04",
	"game_released": "1 чер 2004",
	"loc_desc": "Локалізація від STS UA у вигляді модифікаці.",
	"short_desc": "Легендарний екшн про доктора Ґордона Фрімена, чий один день на роботі у корпорації «Блек-Меса» змінив увесь світ.",
	"short_desc_steam": "",
	"os_windows": "1",
	"os_linux": "1",
	"os_mac": "1",
	"is_f2p": "1",
	"img1_url": "https:\/\/i.imgur.com\/HS7rqcw.jpg",
	"img1_ur2": "https:\/\/i.imgur.com\/CdNI6EC.jpg",
	"img1_ur3": "https:\/\/i.imgur.com\/xW4FrDs.jpg",
	"price_uah": "169",
	"download_url": "http:\/\/steamcommunity.com\/sharedfiles\/filedetails\/?id=1127260686",
	"translate_url": ""
}

К примеру необходимо проверить переменную translate_url и не выводить окружающий её слой, например

<small class="translate_url">Crowdin URL: {{ info.translate_url }}</small>

Пример кода.

Answer 1

[nvdfxx]

<small v-if="getTranslateURL" class="translate_url">Crowdin URL: {{getTranslateURL}}</small>

computed: {
    getTranslateURL() {
        if(info.translate_url !== '') {
            return info.translate_url
        } else return false
    }
}

Comments

[Кирилл Красин]

Спасибо за ответ! Подскажите, а в какой участок кода Vue его необходимо вставить. Следуя примеру добавил его сразу после data{}, однако это не сработало.

Пример.

[nvdfxx]

где вы json берете?

export default {
    data() {
        return() {

        }
    },
    computed: {
        getTranslateURL() {
            if(this.info.translate_url !== '') {
                return this.info.translate_url
            } else return false
        }
    }
}

[Кирилл Красин]

nvdfxx,

new Vue({
  el: '#app',
  data() {
    return {
      info: null,
      loading: true,
      errored: false
    };
  },
mounted() {
    axios
      .get('https://api.gametranslation.net/app/280')
      .then(response => {
        this.info = response.data;
      })
      .catch(error => {
        console.log(error);
        this.errored = true;
      })
      .finally(() => (this.loading = false));
  }
});

[nvdfxx]

вроде все правильно, не вижу ошибок

[Кирилл Красин]

nvdfxx, Скрипт то работает) Я не пойму куда необходимо добавить computed:{}

[Антон Антон]

Кирилл Красин, А пробовали сначала документацию читать? Она, очень хорошая и на русском. https://ru.vuejs.org/v2/guide/conditional.html https://ru.vuejs.org/v2/guide/computed.html

[Кирилл Красин]

Антон Антон, Пробовал, читал. Не понял, поэтому и обратился за помощью. Выше я написал:

Подскажите, а в какой участок кода Vue его необходимо вставить. Следуя примеру добавил его сразу после data{}, однако это не сработало.

Код computed:{} я добавляю после обработки JSON:

spoiler

new Vue({
  el: '#app',
  data() {
    return {
      info: null,
      loading: true,
      errored: false
    };
  },
mounted() {
    axios
      .get('https://api.gametranslation.net/app/569480')
      .then(response => {
        this.info = response.data;
      })
      .catch(error => {
        console.log(error);
        this.errored = true;
      })
      .finally(() => (this.loading = false));
  },
  computed: {
    getTranslateURL() {
        if(info.translate_url !== '') {
            return info.translate_url
        } else return false
    }
}
});

[nvdfxx]

я увидев, в computed везде перед info this не хватает

[Кирилл Красин]

nvdfxx, спасибо, как раз только что добрался до консоли ошибок и увидел это. Огромное спасибо!