Using VueJS to determine if a certain string includes a specific substring within an if-statement embedded within a v

I am aiming to verify if the link in a json object contains 'http'. If it does, I want to assign a target='_blank' attribute to the v-btn. The link could also be something like #test.

Currently, this is how I am attempting to achieve it:

<v-btn
color="primary"
text
:href="x.link"
x.link.includes("http") ? target="_blank" : null
>
    Read more
</v-btn>

However, I encounter this error message pointing to the first double quote after http: 

error: Parsing error: unexpected-character-in-attribute-name

This is an example of what x looks like:

0:Object
created_at:null
header:"Sport"
id:1
image_large:"https://i.picsum.photos/id/389/800/400.jpg"
image_medium:"https://i.picsum.photos/id/389/600/300.jpg"
image_small:"https://i.picsum.photos/id/389/200/200.jpg"
link:"http://example.com"
submenu:null
updated_at:null

Some objects have a link like link:"#test"

The issue arises with .includes but I haven't found a solution or workaround yet.

I hope my request is clear. Thank you for your assistance.

javascriptstringvue.jsvuetify.js

Answer №1

The issue here is that JavaScript syntax is being injected directly into the "HTML", causing it to be misinterpreted. Instead of not declaring any target and setting target to an empty string, you can use the standard :attribute format to alternate between "_blank" and "":

<v-btn
  color="primary"
  (... other things)
  :target="x.link.includes('http') ? '_blank' : ''"
>

(It's important to note the use of single quotes within the actual JS code.)

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

Updating a property in React by fetching data from API and storing it in the cache

Recently, I implemented nanoid to generate unique IDs for my NBA team stat tracker app. However, upon browser refresh, the fetch function generates new IDs for each team stored in the favorites list. This causes the app to fetch data again and assign a new ...

javascriptreactjstypescript

Waiting in Python using Selenium until a class becomes visible

Currently, I am trying to extract information from a website that has multiple web pages. This is how my code appears: item_List = [] def scrape(pageNumber): driver.get(url + pageExtension + str(pageNumber)) items = driver.find_elements_by_class_ ...

javascriptpythonseleniumautomated-tests

Use javascript to modify a specific section of a link

I have a set of datatable rows with links that contain data, and I need to modify part of the link text. For instance, if the link is 200.0.0.10, I want to change it to 160.11.10.12. Despite attempting the following code, the link does not change: var ...

javascriptphpjqueryajax

React Router V6 - page is not found in browsing history

Currently, I am encountering an issue with react router v6. While on the detail page, if I press the arrow in Chrome to go back to the previous page, it takes me to the page before the previous one. I checked the history by long pressing on the back arrow, ...

javascriptreactjsreact-router

Guidelines for validating email input using jQuery

Although I am not utilizing the form tag, you can still achieve form functionality using jQuery Ajax. <input type="email" placeholder="Email" name="email" /> <input type="password" placeholder="Password ...

javascripthtmljquery

How can I track and log the name of the country each time it is selected by a click?

I'm currently utilizing VueJS along with a REST API and axios to retrieve the list of countries, then showcasing them in card format on the webpage. However, I am facing a challenge in creating a history list that captures the last 5 countries clicked ...

javascriptvue.js

Having trouble generating an image with JavaScript

I am currently working on incorporating an image onto a webpage using JavaScript. Surprisingly, even the alert('This function works!') is not displaying anything! What could be causing this issue? Please assist! <!DOCTYPE html> <html> ...

javascripthtml

Stacked column tooltip displaying an array of 3 values

I am working with a json code that looks like this: [[1385420403000,9.86,6.91],[1385506802000,11.89,6.57],[1385593203000,14.11,10.58],[1385679602000,9.1,8.9],[1385766003000,13.59,7.53],[1385852402000,10.68,6.69],[1385938803000,11.03,10.52],[1386025202000, ...

javascriptjqueryarrayshighchartstooltip

Maintaining TextBox State in ASP.Net Through Postbacks

Can anyone help me figure out how to maintain the control state that has been modified in Javascript? I am working with two TextBoxes, one DropDownList, and a button (all Runat=Server) in C# ASP.net 2010 Express. The first textbox accepts any user in ...

c#javascriptasp.nettextboxpostback

Rotate an object upwards in three.js in order to achieve dynamic movement and enhance

I'm struggling with 3D calculations and could really use some assistance. In my scene, I have a sphere representing the earth and I'm using OrbitControl to "rotate" it (although in reality, OrbitControl rotates the camera). I need a function, s ...

javascriptthree.jsrotation

Steps on how to set the values of a select option based on a JSON parsed array

After receiving an array from a JSON call, I am trying to populate a select element with the data. {1:Android, 2:IOS, 3:Business Management Systems, 4:Database, 5:Codes/Scripts, 6:Others} or 1: "Android" 2: "IOS" 3: "Business Management Systems" 4: "Da ...

javascriptjqueryajaxjsonselect

working with Selenium in the Chrome web browser

Within a file named e2e.js, the following code was written: const webdriver = require('selenium-webdriver'); const driver = new webdriver.Builder().forBrowser('chrome').build(); driver.get('https://www.google.co.il/'); I h ...

javascriptnode.jsreactjsselenium

Ways to automatically refresh HTML table in Django framework

How can I dynamically update the search content under the hostname column in an HTML table? The search content needs to be updated every time, and the row number should increase according to the number of hostnames entered by the user. Below is my index.h ...

javascriptpythonhtmldjangoajax

Develop a function for locating a web element through XPath using JavaScriptExecutor

I have been working on developing a method in Java Script to find web elements using XPath as the locator strategy. I am seeking assistance in completing the code, the snippet of which is provided below: path = //input[@id='image'] def getElem ...

javascriptpythonseleniumrobotframework

What is the correct way to utilize "data:" in a jQuery AJAX call?

There seems to be an issue with my code within the deletePost function. The problem lies in the fact that $_GET['title'] is empty. Although I set the title value in the ajax using postTitle: $(this).siblings("h3.blog").text(), it doesn't see ...

javascriptphpjqueryajax

Three.js - Optimizing and Handling Images - Best Practices

My current project has a unique concept: https://i.sstatic.net/Jd3Ot.jpg The main idea revolves around a virtual room that dynamically adjusts its height based on the number of images loaded by the user. While it functions smoothly with fewer pictures, ...

javascriptimageoptimizationthree.js

Guide to developing JavaScript code that moves information from one local website to a different one

Here's the scenario: You input text into a field on website A and click a button. Upon clicking that button, the entered text should appear in website B. I attempted to use localStorage for this functionality, but unfortunately it was not successful. ...

javascripthtml

Angular sorting - Strings with undefined values are placed at the end

I am looking to understand how to effectively utilize the Angular orderBy filter with a custom sorting function that places undefined values at the end. For numeric sorting, my code looks like this: <tr ng-repeat="item in items | handleEmptyValues(sor ...

javascriptangularjssql-order-by

Proper Techniques for Removing, Creating, and Storing Referenced Data in Mongoose and Express

The main issue I am facing is that when attempting to delete a Comment, I am unable to locate the index of that specific comment within the post.comments and user.comments arrays as it consistently returns -1. The reason I need to find it is so that I can ...

javascriptnode.jsmongodbexpressmongoose

Triggering a dynamically created event with the onchange event

I'm currently working on creating an input type file, and here is the code I have: var element = document.createElement("INPUT"); element.type = "file"; element.id = "element" + i; $("#media").append("<br>"); $("#media").append("<br>"); $ ...

javascriptjqueryeventsonchange