How to isolate text from an attachment in Vue.js

Admin 1
Viewed 34

I have a app in which I often receive emails, which are then displayed in the form of attachments. I can access the text value through my code in props.row.text.

I want to save this value, and feed it into my translation API, which is called via a TranslationButton.vue Component , which I'll link below. My issue is I'm unable to figure out the most straightforward method of 1) creating a function that saves the value of props.row.text and 2) passes that down to TranslationButton.vue Component, where I will need to use it as an input.

I'll attach some code snippets below:

Main.vue (how attachments are stored)

   <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>
vuejs2 vue-component vue.js
1 Answers

I think you just need to place <translation-button /> somewhere in the template section of Main.vue.

components: {
//...
TranslationButton,
}

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

And then correct your translateMessage method in TranslationButton.vue to use the text prop.

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();
    }
user_107382380
Related