如何在 Vue.js 中将文本与附件隔离开来答案

【问题标题】：How to isolate text from an attachment in Vue.js如何在 Vue.js 中将文本与附件隔离开来
【发布时间】：2021-11-09 12:46:11
【问题描述】：

我有一个应用程序，我经常在其中接收电子邮件，然后以附件的形式显示。我可以通过props.row.text 中的代码访问文本值。

我想保存这个值，并将其输入到我的翻译 API 中，该 API 通过 TranslationButton.vue 组件调用，我将在下面链接。我的问题是我无法找出最直接的方法：1）创建一个保存 props.row.text 值的函数，2）将其传递给 TranslationButton.vue 组件，我需要将其用作输入。

我会在下面附上一些代码sn-ps：

Main.vue（附件的存储方式）

   <template v-if="showAttachments && hasAttachments(props.row)">
            <div class="divider">
              Attachments
            </div>
            <div class="preview-wrapper">
              <template 
                v-for="attachment in props.row.attachments"
              >
                <attachment-preview-link
                  :attachment="attachment"
                  :active-attachments="props.row.attachments"
                />
                <br>
              </template>

TranslationButton.vue

    <template>
 <b-button type="is-text" @click="translateMessage()">Übersetzen</b-button>
</template>

<script>

export default {
  name: "TranslationButton",

  props: {
    text: '',
  },

  methods: {
    async translateMessage(data = {}) {
      const url = 'https://api.translation.com/v1/translate'
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          "auth_key": `xxxxxxxx`,
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      });
      return response.json();
    }
  },
};


</script>

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

我认为您只需将<translation-button /> 放在Main.vue 的模板部分中的某个位置即可。

components: {
//...
TranslationButton,
}

<translation-button :text="props.row.text" />

然后更正TranslationButton.vue 中的translateMessage 方法以使用text 属性。

async translateMessage() {
      const url = 'https://api.translation.com/v1/translate'
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          "auth_key": `xxxxxxxx`,
          "Content-Type": "application/json"
        },
        body: JSON.stringify(props.text)
      });
      return response.json();
    }

【讨论】：