vue.jsでcomponentに渡す変数を元に条件分岐をしたい

Question

前提・実現したいこと

laravel5.8
vue.js

PictureComponentに渡ってくる pic="{{ $product->pic1}}" が存在しているかしていないかで条件分岐をしたいです。

もしpic="{{ $product->pic1}}"が存在しているなら

<img :src="/storage/{{pic }}" class="img">

を表示させて、
もしpic="{{ $product->pic1}}"が存在していないなら、

      <img :src="data.image" class="img">

を表示させたいです。

該当のソースコード

    <div id="picture">
      <picture-component pic="{{ $product->pic1 }}"></picture-component>
    </div>

...
    <div class="img-container">
      <input type="file" ref="file" @change="setImage" class="input" name="pic1" />
      <div v-if=""></div>
      <img :src="data.image" class="img">
      <div v-else></div>
        <img :src="/storage/{{pic}}" class="img">
    </div>
  </div>
...

window.Vue = require('vue');

Vue.component('picture-component', require('./components/PictureComponent.vue').default);

const picture = new Vue({
    el: '#picture',
});

Answer 1

srcにjavascriptから入れることで解決しました。

<template>
  <div class="c-product__item" >
    <div class="c-product__info"><div class="c-product__name">画像</div><div class="c-product__warning">必須</div></div>
    <div class="img-container">
      <input type="file" ref="file" @change="setImage" class="input" name="pic1"/>
      <img :src="/storage/ + pic" class="img">
    </div>
  </div>
</template>
<script>
export default {
  props: [
    'pic',
  ],
  data() {
    return {
      data: {
        image: "",
        name: "",
      }
    };
  },
  methods: {
    setImage(e) {
      const files = this.$refs.file;
      const fileImg = files.files[0];
      const preview = document.querySelector('img');
      if (fileImg.type.startsWith("image/")) {
        this.data.image = window.URL.createObjectURL(fileImg);
        this.data.name = fileImg.name;
        this.data.type = fileImg.type;
        console.log(this.data.image);
        console.log(this.data.name);
        console.log(this.data.type);
        preview.src = this.data.image;
      }
    },

  }
};
</script>
<style scoped>
  .img-container {
    width: 300px;
    height: 300px;
    position: relative;
  }
 .input {
   position: absolute;
   opacity: 0;
   height: 100%;
   width: 100%;
 }

 .img {
   width: 300px;
   height: 300px;
   background: #f2f2f2;
   object-fit: cover;
 }
</style>