vuejs for each row of the textarea, show 1 value

Question

vuejs for each row of the textarea, show 1 value

I am facing an issue

I need to extract a value for every row in posts and display it in a textarea

Let me provide an illustration https://i.sstatic.net/HcUaS.png

In the image above, I aim to assign a value to each line of text input Upon hitting enter and moving to the next line, I want to capture the text entered on that specific line as another value.

My objective is to generate content for each column

Whether using vuejs compositions api or option api remains to be determined

javascript vue.js

Answer 1

Answer №1

Give this a shot.

<script>
import { ref, computed } from 'vue'

export default {
    setup() {
        const userInput = ref('')

        const separatedValues = computed(() => userInput.value.split('\n'))

        return { userInput, separatedValues }
    }
}
</script>

<template>
    <textarea v-model="userInput"></textarea>

    <p>
        {{ separatedValues }}
    </p>
</template>

Answer 2

Give this a shot.

<script>
import { ref, computed } from 'vue'

export default {
    setup() {
        const userInput = ref('')

        const separatedValues = computed(() => userInput.value.split('\n'))

        return { userInput, separatedValues }
    }
}
</script>

<template>
    <textarea v-model="userInput"></textarea>

    <p>
        {{ separatedValues }}
    </p>
</template>

vuejs for each row of the textarea, show 1 value

Answer №1

Similar questions

Reassigning Click Functionality in AJAX After Initial Use

Integrating new information into an existing JSON file using React Native

Using jQuery to arrange information from an API into a table

Building a versatile login system for various roles and users using Vue.js

Optimal strategies for initializing Knockout JS models from backend code

Using pre-built modules in an environment that does not support Node.js

Utilize a node module within a web browser

Displaying all components simultaneously instead of displaying placeholders and awaiting image downloads

Display a Bootstrap input button group addon, where the first button has rounded corners only after the second button has been hidden

Enhance the appearance of your custom Component in React Native by applying styles to Styled Components

The issue I am facing is that whenever I use an AJAX POST request,

Encountering a 400 bad request error when attempting to utilize AJAX within a WordPress environment

Eliminating an ngRepeat item from the $rootScope array does not automatically result in the item being removed from the html code

VueJS with customized Storybook configuration and Jest error "Module '@storybook/vue/dist/server/babel_config' not found in 'config-loader.js.'"

Error: Headers cannot be set after they have already been sent, resulting in an Unhandled Promise Rejection with rejection id 2

Using Vue.js: A method to implement focus on a disabled input field

Implementing requirejs alongside retinajs for enhanced performance and compatibility

Adjust the iframe height when using slidetoggle

Creating Vue views within Electron applications to use as plugins

CORS request unsuccessful on Vue.js and Express server