0👍
✅
I was able to solve the issue using pure JavaScript QRCode instead of vue-qrcode library.
The final view
@model IEnumerable<POCWeb.Models.WeatherForecast>
@{
var BaseUrl = @Model.FirstOrDefault().BaseUrl;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="@BaseUrl/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="@BaseUrl/lib/vue/css/bootstrap-vue.min.css" />
</head>
<body>
<div id="app">
<header>
<div class="container">
<img src="@BaseUrl/img/logo.png" class="img-thumbnail">
</div>
</header>
<div class="container">
<main role="main" class="pb-3">
<table class="table">
<thead>
<tr>
<td>
Date
</td>
<td>
TemperatureC
</td>
<td>
Summary
</td>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@item.Date
</td>
<td>
@item.TemperatureC
</td>
<td>
@item.Summary
</td>
</tr>
}
</tbody>
</table>
</main>
</div>
<div class="container">
<div id="qrcode"></div>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - POCWeb - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
<p id="log"></p>
</div>
<script src="@BaseUrl/js/qrcode.js"></script>
<script>
try {
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
var c = document.getElementById("log");
c.innerHTML = "printed";
}
catch (err) {
var c = document.getElementById("log");
c.innerHTML = "catch: " + err.messge;
}
</script>
</body>
</html>
Source:stackexchange.com