I have a string of text that contains a number. I just wanted to make the number bold, not the rest of the text. is there an easy way to make this possible in vue js?
<a :href="detailUrl">
{{ content }}
<span v-if="detailText && detailUrl" class="notification-detail-link"
>{{ detailText }} >></span
>
</a>
The content variable comes in as a prop. This variable contains the string of text with a number that I would like to make bold
Use a computed property textBoldNumbers based on your prop the use v-html directive to render it :
props:["detailText "],
computed:{
textBoldNumbers(){
return this.detailText.replace(/([0-9])/g, "<b>$1</b>")
}
}
template :
<a :href="detailUrl">
{{ content }}
<span v-if="detailText && detailUrl"
class="notification-detail-link"
v-html="textBoldNumbers"
> </span
>
</a>
EXAMPLE
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
detailText: "aaa 98 vvv ddd 7 98"
}
},
computed: {
textBoldNumbers() {
return this.detailText.replace(/([0-9])/g, "<b>$1</b>")
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<span v-html="textBoldNumbers"> </span>
</div>
Related
In res.data.tweets i am fetching tweets from server and storing values for every tweet in tweetData obj. In tweet_text, i would like to add a link to the tagged twitter users(clickin on tag will redirect to twitter profile). I figured out how do i find tagged users but i am not able to add a link either with .link or .href attribbute.
axios.post(API_URL, null, { params }).then(res => {
this.currentPage = res.data.page
this.numberOfPages = res.data.numberOfPages
res.data.tweets.forEach(tweet => {
const tweetData = {
id: tweet.id,
tweet_text: tweet.tweet_text,
twitter_name: tweet.twitter_name,
twitter_username: tweet.twitter_username,
added_at: moment(String(tweet.added_at)).format('MM/DD/YYYY hh:mm'),
}
this.tweets.push(tweetData)
// Below this line i am trying to achieve something by adding a link
this.tweets.forEach(el => {
el.tweet_text.split(' ').forEach(word => {
if (word.includes('#')) {
// word = 'this is tag'
word.link('https://twitter.com')
console.log(word.link)
}
})
})
})
})
This is component where data is shown
<div class="tweets-container">
<div
v-for="tweet in tweets"
:key="tweet.id"
>
<div class="tweet-card">
<div class="username-time">
<div class="user-info">
<p class="name">
{{ tweet.twitter_name }}
</p>
<p class="user-info-p">
#
</p>
<p class="username">
<a
:href="'https://twitter.com/' + tweet.twitter_username"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
</div>
<div class="time">
<p>{{ tweet.added_at }}</p>
</div>
</div>
<div class="text">
<p>{{ tweet.tweet_text }}</p>
</div>
</div>
</div>
</div>
I don't think it's going to work this way.
You should use a computed property which will append the username to the twitter base link. Then, in your template, you can link the href property to the computed property.
computed: {
userLink: function () {
return "http://twitter.com/" + this.tweet.twitter_username
}
}
You can now use this "userLink" directly in your template.
<p class="username">
<a
:href="userLink"
class="twitter_link"
target="_blank"
>
{{ tweet.twitter_username }}
</a>
</p>
I didn't test the code I wrote, feel free to let me know if you need further advice ;)
When making an ajax request in JavaScript, it appears that the view has received a post of raw data into web page, i would say this is like looking at a csv file in notepad, just lines and lines of data, albeit the correct data, just not in the jquery datatable i would expect to see.
When just using Jquery to display all the data correctly in the table like so:
<script>
$('#IndexTable').DataTable({ responsive: true });
</script>
There is no issue.
I have also tried this in the view:
<script>
$(document).ready(function () {
test();
})
var test = function () {
$ajax({
type: 'GET',
url: '/ClinicalASSPATVM/test',
success: function (response) {
BindDataTable(response);
}
})
}
var BindDataTable = function (response) {
$("#IndexTable").DataTable({
"aadata": response,
"aoColumn": [
{"mData": "Product:"},
]
});
}
</script>
This is my Controller portion of the code:
public ActionResult test(int? ClinicalAssetID)
{
var ClinicalASSPATVM = (from s in db.ClinicalAssets
join cp in db.ClinicalPATs on s.ClinicalAssetID equals cp.ClinicalAssetID into AP
from subpat in AP.DefaultIfEmpty()
orderby s.ClinicalAssetID descending
select new ClinicalASSPATVM
{
ClinicalAssetID = s.ClinicalAssetID,
ProductName = s.ProductName,
ModelName = s.ModelName,
SupplierName = s.SupplierName,
ManufacturerName = s.ManufacturerName,
SerialNo = s.SerialNo,
PurchaseDate = s.PurchaseDate,
PoNo = s.PoNo,
Costing = s.Costing,
TeamName = s.TeamName,
StaffName = s.StaffName,
InspectionDocumnets = subpat.InspectionDocumnets ?? String.Empty,
InspectionOutcomeResult = subpat.InspectionOutcomeResult
});
return Json(new { data = ClinicalASSPATVM }, JsonRequestBehavior.AllowGet);
}
This is the View:
#model IEnumerable<Assets.Areas.Clinical.Models.ClinicalASSPATVM>
<link href="~/content/datatables/media/css/datatables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/extensions/Responsive/css/responsive.dataTables.min.css" rel="stylesheet" />
#{
ViewBag.Title = "View Clinical";
}
<div class="pageheader">
<h2><i class="fa fa-pencil"></i> Clinical Asset Dashboard</h2>
<div class="breadcrumb-wrapper">
<span class="label">You are here:</span>
<ol class="breadcrumb">
<li>Asset Management System</li>
<li class="active">Clinical Assets - Overview</li>
</ol>
</div>
</div>
<div class="contentpanel">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-btns">
−
</div><!-- panel-btns -->
<h3 class="panel-title">Last 10 Assets:</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table id="IndexTable" class="table table-striped table-bordered" >
<thead>
<tr>
<th>Product:</th>
<th>Model:</th>
<th>Supplier:</th>
<th>Manufacturer:</th>
<th>Serial No:</th>
<th>Purchase Date:</th>
<th>Purchase Order No:</th>
<th>Cost:</th>
<th>Team Location:</th>
<th>Owner:</th>
<th>Inspection OutcomeResult:</th>
</tr>
</thead>
</table>
</div><!-- table-responsive -->
</div><!-- panel-body -->
</div><!-- panel -->
</div>
#section Scripts {
<script src="~/Scripts/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/media/js/dataTables.bootstrap.min.js"></script>
<script src="~/Scripts/DataTables/extensions/Responsive/js/dataTables.responsive.js"></script>
<script>
$(document).ready(function () {
$ajax({
url: '/ClinicalASSPATVM/test',
method: 'GET',
datatype: 'json',
sucess: function (data) {
$('#IndexTable').datatable({
data: data,
columns: [
{ "data": "ProductName" },
]
});
}
});
});
</script>
}
This is the crazy output example, also i see no layout page headers, footers or side bars.
{"data":
[{"ClinicalAssetID":75,"SerialNo":"34563463453453453","PurchaseDate":"\/Date(1551657600000)\/","PoNo":"567","Costing":1500,"InspectionDocumnets":"","ProductName":{"ProductID":2,"AssetAssignmentID":2,"ProductName":"Bed"},"InspectionOutcomeResult":null,"ModelName":{"ModelID":1,"AssetAssignmentID":2,"ProductID":8,"ModelName":"M1"},"Code":null,"AssetTypeName":null,"ManufacturerName":{"ManufacturerID":1,"AssetAssignmentID":2,"ProductID":8,"ManufacturerName":"Omron"},"StaffName":{"StaffID":1,"StaffName":
I Hope someone can shed some light on what i have done wrong.
My vue component is like this :
<template>
<div>
<div v-if="!list">No results.</div>
<div v-else class="panel-group" v-for="item in list">
...
</div>
</div>
</template>
<script>
export default {
...
computed: {
list: function() {
return this.$store.state.order.list
}
}
}
</script>
The result of console.log(this.$store.state.order.list) is like this :
Seems it's a object
I try like that, but when the object empty, it not display <div v-if="!list">No results.</div>
Is there anyone who can help me?
Update :
If no data, the result of console.log(this.$store.state.order.list) is like this :
<div v-if="Object.keys(list).length === 0">No results.</div>
I am new to Vue.js. Very new so this question might sound a lot like a first graders. Forgive me.
I have the App.vue and Character.vue setup. I wanted to create characters on the fly and add them to an array (in App.vue) and let the rendering of the look/feel of the characters be done using Character.vue. The characters are created and added to the array and can be retrieved properly. Only thing is...Character.vue doesn't render them properly because for some reason, the character it retrieves from the array is undefined.
Help me?
Attaching files
App.vue
<template>
<div>
<div class='gameHeader'>
<h1>{{ gameHeader }}</h1>
</div>
<div class='gameMessages'>
<div class='gameMessage' v-for="msg in gameMessages">
{{ msg }}
</div>
</div>
<div class='gameMain'>
<button #click="rollNewCharacter">Roll New</button>
<div class="playerParty">
<character v-for="p in playerParty"></character>
</div>
<div class="computerParty">
<character v-for="c in computerParty"></character>
</div>
</div>
<div class='gameFooter'>
{{ gameFooter }}
</div>
</div>
</template>
<script>
import Character from "./assets/components/Character.vue";
export default {
components: { 'character': Character },
data: function(){ return { gameHeader: 'Monster Attack', gameMessages:[], playerParty: [], computerParty: [], gameFooter: '' }; },
methods: {
rollNewCharacter() {
var c = Character;
c.name = 'Usman';
c.type = 'Warrior';
c.mana = 100;
c.health = 100;
c.totalHealth = 100;
c.totalMana = 100;
console.log(c.name);
this.playerParty.push(c);
console.log(this.playerParty[0].name);
//this.computerParty.push(chr2);
}
}
}
</script>
Character.vue
<template>
<div class="character">
<span class='name'>{{ name }}</span><span class='type'>({{ type }})</span>
<div class='health'><div class='total' :class="totalHealth"><div class='health' :class="health"></div></div></div>
<div class='mana'><div class='total' :class="totalMana"><div class='mana' :class="mana"></div></div></div>
<span class='damage'>{{ damage }}</span>
<div class="actions">
<button #click="attack">Attack</button>
<button #click="specialAttack">Special Attack</button>
<button #click="heal">Heal</button>
</div>
</div>
</template>
<script>
export default {
props: [ 'name', 'type', 'mana', 'health', 'damage' , 'totalHealth', 'totalMana' ],
methods: {
attack: function(){},
specialAttack: function(){},
heal: function(){ alert(this.name); console.log(this);}
}
}
</script>
<style>
</style>
You should pass a prop when using the character component:
<character :character="p" v-for="p in playerParty"></character>
I have updated the character to receive only one prop:
export default {
props: [ 'character' ],
methods: {
attack: function(){},
specialAttack: function(){},
heal: function(){ alert(this.name); console.log(this);}
}
}
And this is the character component template with the new prop:
<template>
<div class="character">
<span class='name'>{{ character.name }}</span><span class='type'>({{ character.type }})</span>
<div class='health'><div class='total' :class="character.totalHealth"><div class='health' :class="character.health"></div></div></div>
<div class='mana'><div class='total' :class="character.totalMana"><div class='mana' :class="character.mana"></div></div></div>
<span class='damage'>{{ character.damage }}</span>
<div class="actions">
<button #click="attack">Attack</button>
<button #click="specialAttack">Special Attack</button>
<button #click="heal">Heal</button>
</div>
</div>
</template>
I have a named view called myView in which I have two div elements that I want to show conditionally using ng-show based on whether the value of $scope.states['currentState'] is 'A' or 'B'. The value of $scope.states['currentState'] is changed when an anchor tag is clicked which calls the doStuff function on the myController controller.
The issue I am having is when the anchor tag is clicked and the doStuff function is clicked, it shows on the console that the value of $scope.states['currentState'] has been modified, but its not updating the myView named view accordingly.
Following is the code for app.js, myView.html and index.html files. The index.html file is being used as a <div ui-view></div> in an index.ejs file that I am rendering using Express with Node.js.
app.js
var app = angular.module("app", ['ui.router']).
config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
'': { templateUrl: 'partials/index.html' },
'myView#home': {
templateUrl: 'partials/myView.html',
controller: 'myController'
},
'myOtherView#home': {
templateUrl: 'partials/myOtherView.html',
controller: 'myController'
}
}
});
}])
app.controller("myController", ['$scope', function($scope){
var states = ['A', 'B'];
$scope.states = states;
$scope.states['currentState'] = states['currentState'] || 'A';
$scope.doStuff = function(toState) {
//doing stuff
$scope.states['currentState'] = toState;
console.log($scope.states['currentState']);
};
} ]);
index.html
<div class="main">
<div class="container">
<div class="row margin-bottom-40">
<div class="col-md-12 col-sm-12">
<div class="content-page">
<div class="row">
<div ui-view="myView"></div>
<div ui-view="myOtherView"></div>
</div>
</div>
</div>
</div>
</div>
</div>
myView.html
<div ng-controller='myController'>
<div ng-show="states['currentState'] == 'A'">
//displaying this div if the currentState is A
<a ng-click="doStuff('B')">Do stuff and show B</a>
</div>
<div ng-show="states['currentState'] == 'B'">
//displaying this div if the currentState is B
</div>
</div>
Could somebody help me understand that why am not getting the div with states['currentState'] == 'B' shown, even when I see the value of console.log($scope.states['currentState']) changed from 'A' to 'B' when the doStuff function is called in myController?
Edit:
Here is the demo of the issue I am facing.
Okay So I was mistaken in my comment.
The real issue was that you used {{}} in your ng-show which is not needed as these expect to take angular expressions.Also I would make current state a property of your scope as at the moment you are trying to make it a property of an array inside your scope.
Hope that helps! Below is the modified code for your view:
<div ng-controller='MainCtrl'>
<div ng-show="currentState === 'A'">
<a ng-click="doStuff('B')">Do stuff and show B</a>
</div>
<div ng-show="currentState === 'B'">
<a ng-click="doStuff('A')">Do stuff and show A</a>
</div>
</div>
EDIT: Working plunker http://plnkr.co/edit/1llQMQEdxIwu65MNoorx?p=preview