Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 兄弟组件Vue.js之间的通信是否仅在插入卡时更改卡的视图?_Javascript_Vue.js_Vuejs2_Vue Component_Vuex - Fatal编程技术网

Javascript 兄弟组件Vue.js之间的通信是否仅在插入卡时更改卡的视图?

Javascript 兄弟组件Vue.js之间的通信是否仅在插入卡时更改卡的视图?,javascript,vue.js,vuejs2,vue-component,vuex,Javascript,Vue.js,Vuejs2,Vue Component,Vuex,我有一个问题,当我点击组件B上的插入文本按钮时,它将添加文本卡,即组件a。。插入卡片时,我需要显示文本区域和保存按钮,然后单击保存文本区域后,必须隐藏该区域。完成后,问题是重新加载页面时,文本区域和保存按钮再次显示。。 注A、B为兄弟姐妹 //A部分 <template> <div class="answer-text-container answer-inner-container"> <div class="content-inner">

我有一个问题,当我点击组件B上的插入文本按钮时,它将添加文本卡,即组件a。。插入卡片时,我需要显示文本区域和保存按钮,然后单击保存文本区域后,必须隐藏该区域。完成后,问题是重新加载页面时,文本区域和保存按钮再次显示。。 注A、B为兄弟姐妹

//A部分

<template>
  <div class="answer-text-container answer-inner-container">
    <div class="content-inner">
      <p class="answer-type">{{ text.type }}</p>
      <p v-show="!this.show" class="answer-text">{{ text.body }}</p>

      <textarea v-model="text.body" v-show="this.show" rows="3" class="edit-text-area border rounded" placeholder="Enter the text here"></textarea>
    </div>
    <div class="button-container" v-show="!this.show">
      <button type="button" @click="editText" class="btn btn-primary edit-text-btn">
        <i v-bind:class="[editTextString]"></i>
      </button>
      <button type="button" @click="$emit('delete')" class="btn btn-danger edit-text-btn">
        <i class="fas fa-trash-alt"></i>
      </button>
    </div>
    <button type="button" @click="editText" class="btn btn-success rounded" v-show="this.show">Save</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      show: 0,
      editTextString: "far fa-edit"
    };
  },
  props: ["text"],
  methods: {
    editText() {
      this.show = !this.show;
      console.log(this.text);
    },
    removeTextComp() {}
  }
};

//B部分

<template>
  <div class="toolbar-container mb-4">
    <div class="col-md-12 p-0 text-center">
      <div class="row mx-0">
        <div class="col-md-4 p-0 d-inline-block toolbar-sub-container">
          <a @click="insertText" href="#">
            <p>Insert Text</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {};
  },
  mounted() {},
  methods: {
    insertText() {
      this.$parent.insertTextComp();
    }
  }
};
</script>

显示:0是输入值。重新加载页面时,此值也会重新加载。因此,如果您想在重新加载后获得show的实际值,请使用localStorage或vuex store。还有一个,我的意思是,如果你的显示值是布尔值,那就更好了

谢谢Dima,但是我是Vue.js的新手,所以你能帮助我如何使用本地存储吗?阅读本文,并在谷歌的“Vue生命周期挂钩”中找到。然后使用“挂载”挂钩应用存储器中的当前显示值。在watcher中,为localStorage添加新的show值。这就是我所做的,但我不知道或者这是最好的方式。@AsmaaM.Elmohamady我回答了你们的问题吗?