I have a button created in vue like this

 <div v-else>
          <div >
            <Default type="submit" :enabled="!formIsValid || loading">
              <div >
              <span v-if="loading">Dibujando</span>
              <div v-else >
                <div >Random</div>

what do I have to do in order to put a text on a text area when I click on random button? The button works but it doesn't output anything. I don't know where do I hve to put the text in order to be interacted with this buttton. I'm a noob with vue so,sorry.

I'm expecting a text to be output on a text area.

CodePudding user response：

You can use v-model on your textarea and overwrite the value on button click.

https://vuejs.org/guide/essentials/forms.html

  Example:
  https://codepen.io/cowall/pen/ZERroqZ

  <textarea v-model="message"></textarea>
  <button @click="clickFunction">click me</button>

   clickFunction() {
      this.message = "Hello You"
    }

CodePudding user response：

posting part of the code of the text area and the button i mentioned before.

    <template>
  <div>
    <div >
      <label
        for="text"
        
      >
        <span>{{ title }}</span>
        <Info :tooltip="tooltip" v-if="tooltip" />
      </label>
    </div>
    <div >
      <textarea
        ref="textarea"
        name="text"
        rows="9"
        v-model="text"
        :maxlength="MAX_CHARACTERS"
        
        :placeholder="placeholder"
      />
    </div>
    <div >
      <p >
        {{ text.length }} / {{ MAX_CHARACTERS }} caracteres
      </p>
      <div >
        <Default
          size="xs"
          @click.prevent="text = ''"
          
          v-if="text.length > 0"
        >
          <font-awesome-icon
            
            :icon="['fas', 'eraser']"
          />
        </Default>
        <ExclamationTriangle
          v-if="text.length > 400 && pathUrl == '/'"
          tooltip-text="Si el texto introducido esta por encima de los 400 caracteres se pueden cobrar créditos extra si los resultados son óptimos."
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { debounce } from "lodash";
import { app } from "@/main";
import { ref, watch } from "vue";
import { ChevronDownIcon } from "@heroicons/vue/solid";
import Default from "@/components/Buttons/Default.vue";
import ExclamationTriangle from "@/components/ExclamationTriangle.vue";
import LoadingAnimation from "../LoadingAnimation.vue";
import Info from "../Info.vue";

const $api = app.config.globalProperties.$api;

const props = defineProps({
  placeholder: {
    type: String,
    default: "",
  },
  tooltip: {
    type: String,
    default: null,
  },
  title: {
    type: String,
    default: "",
  },
  localStorageKey: {
    type: String,
    default: "WRITTEN_TEXT",
  },
  pathUrl: {
    type: String,
    default: "/",
  },
});

const textarea = ref(null);
// I have deactivated this since in mobile wasn't useful (Keyboard takes all screen)
//onMounted(() => {
//  textarea.value.focus();
//});
const MAX_CHARACTERS = 700;

const savedText = window.localStorage.getItem(props.localStorageKey) || "";
const text = ref(savedText);
const emit = defineEmits(["update:modelValue"]);

const updateLocalStorageDebounced = debounce((val) => {
  window.localStorage.setItem(props.localStorageKey, val);
}, 100);

watch(text, (value) => {
  updateLocalStorageDebounced(text.value);
});

const updateValue = () => {
  emit("update:modelValue", text);
};

updateValue();
</script>





<template>
  <FormContainer >
    <div v-if="false" >
      <div><LoadingAnimation  /></div>
    </div>
    <form v-else @submit.prevent="submit()" >
      <TextArea
        pathUrl="/images"
        local-storage-key="WRITTEN_IMAGE"
        v-model="message"
        title="Describe la imágen que quieres"
        tooltip="Nuestra inteligencia artifical generará una imágen única en pocos segundos."
        placeholder="Fotografía analógica de una playa con un árbol en medio."
      />
      <div id=submit >
        <button @click="clickFunction">click me</button>
        </div>
      <div >
        <!-- No remaining questions -->
        <div
          v-if="!moreQuestionsAvailable"
          
        >
          <div >
            <div>No te quedan créditos!</div>
            <div >
              Se te renovarán el
              {{ $filters.formatDate(store.planRenewsAt) }}
            </div>
          </div>
        </div>

        <!-- Questions available -->
        <div v-else>
          <div >
            <Default type="submit" :enabled="!formIsValid || loading">
              <div >
                <font-awesome-icon
                  
                  :
                  :icon="['fas', loading ? 'spinner' : 'image']"
                />
                <span v-if="loading">Dibujando</span>
                <div v-else >
                  <div>Crea</div>
                </div>
              </div>
            </Default>
          </div>

          <div >
            <div v-if="store.remainingCredits != 1">
              Te quedan {{ store.remainingCredits }} créditos
            </div>
            <div v-else>Te queda {{ store.remainingCredits }} uso</div>
            <div v-if="store.fromOrganization && store.organization !== null">
              Te quedan {{ store.organizationUses }} créditos de tu organización
            </div>
            <div>
              Se te renovarán el
              {{ $filters.formatDate(store.planRenewsAt) }}
            </div>
          </div>
        </div>
      </div>
    </form>
  </FormContainer>
</template>
<script setup>
import FormContainer from "../FormContainer.vue";
import { app } from "@/main";
import { ref, computed, onMounted, watchEffect } from "vue";
import TextArea from "./TextArea.vue";
import InputForm from "@/components/InputForm.vue";
import { BaseDropdown } from "@/components/Forms";
import { Default } from "@/components/Buttons";
import { authStore } from "@/stores/auth";
import LoadingAnimation from "../LoadingAnimation.vue";

// Store
const store = authStore();

// Global imports
const $api = app.config.globalProperties.$api;

// Model Values
const images = ref([]);

// Variables
const form = ref({
  prompt: "",
});
const loading = ref(false);

const updateRemainingQuestions = () => {
  store.updateUserInfo().then(() => {
    loading.value = false;
  });
};
const emit = defineEmits(["images", "loading"]);

onMounted(() => {
  updateRemainingQuestions();
});

// Methods
const submit = () => {
  loading.value = true;
  emit("loading", true);
  const data = {
    prompt: form.value.prompt,
  };
  $api.questions
    .generateImages(data)
    .then((images) => {
      updateRemainingQuestions();
      emit("images", images.answers);
    })
    .finally(() => {
      loading.value = false;
      emit("loading", false);
    });
};
const moreQuestionsAvailable = computed(() => {
  if (store.organization === null) {
    return store.remainingCredits > 0;
  } else {
    // From org
    return store.remainingCredits > 0 || store.organizationUses > 0;
  }
});

const formIsValid = computed(() => form.value.prompt.length > 5);
</script>