Calculating Two Results for Two Target Elements in Vue.js

Is it possible to have two different outcomes for result() in Vue's computed based on the element id? For instance, I'd like to return a result with commas replaced by AND for #and, and another result with commas replaced by - for #dash.

https://i.stack.imgur.com/ekWUr.png

new Vue({
  el: '#demo',
  data() {
    return {
      target: '',
    }
  },
  computed: {
    result() {
      //if it is going to #and
      // return '`' + this.target.replaceAll(",", "` AND `") + '`' // If {{ result }} is #and
      // if it is going to #dash
      return '`' + this.target.replaceAll(",", "` - `") + '`' // If {{ result }} is #dash
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p id="and">You Entered {{ result }}</p>
  <p id="dash">You Entered {{ result }}</p>
  <input v-model="target" placeholder="Enter Your Target" />
</div>

Answer №1

If you want to streamline your code, consider creating a function:

new Vue({
  el: '#demo',
  data() { return { target: '' } },
  methods: {
    getSeparatedInputValue(sep) {
      return this.target && 
        this.target.split(',').map(str => '`'+ str + '`').join(sep);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <p id="and">You Entered {{ getSeparatedInputValue(" AND ") }}</p>
  <p id="dash">You Entered {{ getSeparatedInputValue(" - ") }}</p>
  <input v-model="target" placeholder="Enter Your Target" />
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Connect external script actions to HTML elements within components

I'm attempting to incorporate an external script Within public/index.html <script src="https://embed.selly.gg"></script> An event should trigger when I click on a button with specific data attributes. Inside components/shop/ShopItem.js ...

An unusual error occurred stating that the `forEach` property does not exist on the given type

I am working on a chess game and encountering some Typescript errors that I'm struggling to comprehend. The issue arises in the following class method: clickEvent (e: MouseEvent): void { const coordinates: ClientRect = this.chessBoard.getBounding ...

What sets apart the <script> tag with a type attribute from the standard <script> tag in HTML?

Similar Question: Is it necessary to include type=“text/javascript” in SCRIPT tags? While working on my HTML project, I noticed that the JavaScript code within script tags is evaluated even if the type attribute is not explicitly set to "j ...

Nested for loop in JavaScript causing the display of only the final value of the iterating object

When constructing a JSON array object using two different arrays, I noticed that the value of the last iterated value is being assigned to every element in the array. Specifically, for the serial number element, only the last iterated value is being displa ...

Looking to notify the second set of JSON data arrays?

Today, I encountered an issue while working with two arrays of JSON data. Upon trying to alert the second JSON data in AJAX, I found that it was showing as "undefined". How can I successfully alert the value of the second JSON data? The relevant portion o ...

Adjusting widths of strokes in React Native Vector Icons

I selected an icon from the react-native-vector-icon library. For instance, let's use featherIcons. How can I include a stroke-width property to the react-native-vector-icons package? import FeatherIcon from 'react-native-vector-icons/Feather&ap ...

Combining VueJS with the powerful Vue.Draggable plugin, along with the Vuex Store to manage data

Seeking guidance on integrating Vue.Draggable lists with computed variables in a Vuex Store. As a newcomer to VueJS, I'm currently working with the following component setup: // Template <draggable class="list-group" :list="list1" group="people"&g ...

How can a 'complete' event listener be executed for a custom function in JQuery/JavaScript?

Here is the code snippet I'm working with: $('.fblikes span').fblikecount(); $.fn.fblikecount = function(){ //Perform JSON XHR operations to retrieve FB like counts and update the page numbers } This code will cycle through all insta ...

Avoid activating the hover state

Is there a way to prevent a button, div, or li from hovering if it already has an active status using CSS? #list-of-tests .item-test:hover:not(.active) { background-color: #4d5f75; border: solid 1px #4d5f75; } #list-of-tests .item-test:active { ...

How to pass a method from a child component to a parent component in Vue.js

Does anyone know how to pass a function from the child component to the parent component? I have a modal in the parent component with cancel and submit buttons. When either button is clicked, I want to close the child component. I tried setting "show" in t ...

Exploring methods of simulating properties using jest.fn()

Here is the code snippet I'm currently working with: this.$vs.loading() .... this.$vs.loading.close() To successfully pass a mock to shallowMount, I have set it up as follows: const vs = { loading: jest.fn() } mocks: { $vs: vs } However, the ...

Storing each item in its own document within a Firebase collection

I have a feature where users input their sitemap and it generates all the links in the sitemap. How can I then store each of those links in separate documents within a specific collection on Firebase? Below is the current function used to set data in Fir ...

Does CSS in the current IE9 beta allow for text shadows to be implemented?

Text shadows look great in Firefox and Chrome. For example, I have a basic website for streaming videos. Unfortunately, there are no shadows in IE9 for me. This is my CSS code: p { color: #000; text-shadow: 0px 1px 1px #fff; padding-bottom: 1em; } ...

Modify the CSS class by adding attributes dynamically instead of directly to the element

I encountered a situation where I needed to apply a css property to a class rather than an element. For example: $('.class_with_css').css({display:'none'}); This code would add the style "display:none" to all elements with the cl ...

The requested file cannot be accessed using XMLHttpRequest.open url

Currently, I am in the process of learning about AJAX by following the MDN tutorial. However, I have encountered an issue with the first sample code provided to fetch test.html. Regardless of whether I use absolute or relative paths, my local server consis ...

Using the keyof lookup in a Typescript interface is a powerful way to

I'm looking for a solution similar to: interface Operation<T, K extends keyof T> { key: keyof T; operation: 'add' | 'remove'; value: T[K]; } but without the necessity of passing K as a template. Essentially, I want to ...

The CSS files are not loading automatically in my React application using Vite

I am facing an issue with importing css and js files into a view in React using vite. The styles are not loading properly, and I have to keep commenting and uncommenting the imports in my code for them to be recognized when entering the view. Below is a s ...

Steps for resetting the Vue 3 scaffolding

Two options to scaffold a new Vue project are npm init vue@latest and npm create vue@3. I recall there is a specific command that allows you to re-initialize the scaffolding process in order to add additional features like TypeScript or Cypress. Unfortuna ...

tips for retrieving global variables from ajax calls using promises

Currently, I am retrieving data and storing it in global variables in a less than optimal way. Here is the current method: var tranlationJson = $.ajax({ type: "GET", url: "translation.xml", contentType: "text/xml", dataType: "xml", ...

How can one determine when an animation in Three.js has reached its conclusion?

When I write code like this: function renderuj(){ scene.renderer.setClearColor(0xeeeeee, 1); ob1.animation.update(0.5); ob2.animation.update(0.5); scene.renderer.render(scene.scene, scene.camera); animationFram = reques ...